Получение jQueryUi Autocomplete для работы с jQueryMobile

Я работаю над приложением jQueryMobile с некоторыми полями формы, которые требуют автоматической полной функциональности. Я работаю с плагином jQueryUi Autocomplete, но не могу заставить его работать правильно. Он отлично работает, если моя форма является начальной страницей, загруженной в браузер, но не работает, если форма загружается позже через механизм загрузки jQueryMobile ajax.

В версиях, с которыми я работаю, есть:
jQueryMobile: 1.0a4.1
jQueryUi: 1.8.9
jQuery: 1.4.4

Моя функция автозаполнения выглядит следующим образом:

$(function () {
    $('#search').autocomplete({
        source: '/Autocomplete/SearchAutoComplete',
        minLength: 3,
        select: function (event, ui) { }
    });
});

Я думаю, что это нужно подключить к текущей активной странице, но я не уверен, как это сделать. Может ли кто-нибудь дать мне знать, как это сделать?

Кроме того, я не привязан к автозаполнению jQueryUi. Если есть лучший способ сделать это, пожалуйста, дайте мне знать.

Спасибо,
Грег

Ответ 1

Теперь, когда JQuery Mobile созрел совсем немного и приближается к версии 1.0, я решил сделать еще один удар, чтобы заставить его работать правильно. У меня был хороший успех, поэтому я хотел бы поделиться этим решением.

Вот версии, с которыми я сейчас работаю (начиная с 01 февраля 2012 года):

jQuery Mobile 1.0.1
jQuery 1.6.4
jQuery UI 1.8.12

Порядок, на который ссылки ссылаются, имеет решающее значение. Это должен быть jQuery, jQuery UI, jQuery Mobile, а затем ваш пользовательский script файл последний. Мой заголовок страницы выглядит следующим образом:

<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
   <title>My jQM App</title>
   <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
   <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js" type="text/javascript"></script>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.min.js" type="text/javascript"></script>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
   <script src="/Scripts/script.js" type="text/javascript"></script>
   <link rel="stylesheet" href="/Content/style.css" />
</head>

Весь код автозаполнения должен находиться в отдельном файле .js и должен быть последним связанным с ним файлом. В этом примере моя - script.js.

Затем убедитесь, что у всех ваших страниц div (data-role = 'page') также установлен идентификатор. Например, на моей странице поиска у меня есть

<div data-role="page" id="searchPage">

Теперь, когда вся страница div имеет идентификатор, вы можете связать событие jQuery Mobile pagecreate для этого div. На стандартной странице jQuery у вас есть что-то вроде этого для автозаполнения:

$('#search').autocomplete({
    source: '/Autocomplete/SearchAutoComplete',
    minLength: 3,
    select: function (event, ui) { }
});

Чтобы сделать эквивалент, но подключить его к определенной странице div, выглядит следующим образом:

$('#searchPage').live('pageinit', function (event) {
    $('#search').autocomplete({
        source: '/Autocomplete/SearchAutoComplete',
        minLength: 3,
        select: function (event, ui) { }
    });
});

Это хорошо работает для меня до сих пор. Я смог вырезать большинство атрибутов data-ajax = "false", которые у меня были в качестве обходного пути. Это, в свою очередь, привело к повышению производительности приложений. Я никоим образом не выполнил исчерпывающий тест совместимости между jQuery UI и jQuery Mobile, поэтому ваш пробег может отличаться. Оставьте комментарий здесь, если у вас возникнут проблемы с этим методом. Удачи.

Ответ 2

В будущем я недавно выпустил плагин autoComplete, написанный специально для использования с jQuery Mobile:

http://www.andymatthews.net/code/autocomplete/

Ответ 3

$('div').live('pagebeforecreate',function(event,ui){
    // do something in jquery
});

Ответ 4

Я сделал кучу поиска. Автозаполнение jQuery UI работает для изменения текстового поля ввода. Поле поиска фильтра jQuery Mobile имитирует автокомпетент, но я действительно не нашел его очень полезным для использования с фактической формой сбора данных.

В этой статье я начал использовать автозаполнение jQuery UI, но я продолжал сталкиваться с проблемами форматирования. Я закончил писать свой собственный аякс только (на данный момент) автозаполнением и думал, что поделюсь им. Источник там, где вы можете настроить, как вы сочтете нужным. Может быть, кто-то может принять его и улучшить или просто использовать его в его нынешнем виде.

http://schworak.com/blog/e75/jquery-mobile---autocomplete-text-input/

Ответ 5

Я не уверен, применим ли это в вашем случае, но обходным решением было бы добавить атрибут data-ajax = "false" , чтобы страница не загружалась ajax.

http://jquerymobile.com/demos/1.0a4.1/#docs/pages/link-formats.html

Ответ 6

jQuery Mobile теперь имеет автозаполнение, где результаты заполняются в списке. Их демонстрационная страница имеет отличные примеры того, как ее реализовать, как для локальных, так и для удаленных данных.

Ответ 7

Недавно я выпустил компонент автозаполнения с нулевой зависимостью. (Нет-JQuery)

Это полностью поддерживает большинство мобильных браузеров, таких как Android, iOS.

https://github.com/skplanet/sweetsearch/