jQuery AutoComplete Fill Array

Question

Я пытаюсь использовать функцию автозаполнения jQuery, и после прочтения нескольких постов у меня все еще есть два вопроса:

1) Я получил автозаполнение для работы с кодом, размещенным внизу, однако мне нужно заполнить массив под названием «данные» из нашей базы данных. Я пытался использовать разные методы, чтобы заполнить это через AJAX. Я пытался использовать $ .get и $ .ajax. Какой правильный синтаксис для этого?

2) Этот массив будет большим, у меня будет более 60000 значений, если я просто заполню массив один раз. Мне было интересно, можно ли выполнить AJAX-запрос для заполнения массива каждый раз, когда пользователь вводит новое письмо? Это лучше сделать, или просто заполнить массив всеми значениями сразу? Лучше, какие налоги система меньше?

//This code works
<script type="text/javascript">
  $(document).ready(function(){
  var data = "Facebook Gowalla Foursquare".split(" ");
  $("#search_company").autocomplete(data);
  });
</script>


//display company live search
echo('<form id="form" method="post" action="competitor_unlink.php" onsubmit="return">');
echo('Company: <input id="search_company"/>');
echo('<br/>');
echo('<button type="submit" value="Submit">Submit</button>');
echo('</form>');

Answer 1

Посмотрите на эту демонстрацию - это то, что вы хотите сделать (получить данные, используя ajax):

http://jqueryui.com/demos/autocomplete/#remote

Вы можете получить данные из местного и / или удаленный источник: локально это хорошо для небольших наборов данных (например, адрес книга с 50 записями), удаленный необходимо для больших наборов данных, таких как база данных с сотнями или миллионами записи для выбора.

Автозаполнение можно настроить для работы с различными источниками данных, просто указав опцию источника. Данные Источник может быть:

Массив с локальными данными String, указание URL обратного вызова данные могут быть простым массивом строк, или он содержит объекты для каждого элемента в массиве, с меткой или Значение свойства или оба. Этикетка свойство отображается в меню предложений. Значение будет вставляется в элемент ввода после пользователь выбрал что-то из меню. Если только одно свойство указано, он будет использоваться для обоих, например. если вы предоставите только значение-свойства, значение также будет использовать в качестве метки.

Когда используется строка, Плагин автозаполнения ожидает, что строка, указывающая на ресурс URL, который вернет данные JSON. Это может быть на тот же хост или другой (должен предоставить JSONP). Запрос параметр "термин" добавляется к этому URL. Сами данные могут быть в тот же формат, что и локальные данные описано выше.

Третий вариант, обратный вызов, обеспечивает наибольшую гибкость и может использоваться для подключения любого источника данных к Автозаполнения. Обратный звонок получает два Аргументы:

1) Объект запроса, с одним свойство называется «термин», который относится на значение в настоящее время в тексте вход. Например, когда пользователь ввел "New Yo" в поле города, Срок автозаполнения будет равен "новый год".

2) ответный обратный вызов, который ожидает один аргумент для хранения данных предложить пользователю. Эти данные должны быть отфильтрованы на основе предусмотренный срок, и может быть в любом из форматы, описанные выше для простого локальные данные (String-Array или Object-Array с меткой / значением / обоими свойства). Важно когда предоставление пользовательского обратного вызова источника обрабатывать ошибки во время запроса. Вы всегда должен вызывать ответный обратный вызов даже если вы столкнулись с ошибкой. это гарантирует, что виджет всегда имеет правильное состояние.

Answer 2

Вот пример того, как указать URL, который будет возвращать результаты из базы данных в виде JSON, с помощью плагина автозаполнения пользовательского интерфейса jQuery.

$("#search_company").autocomplete({
    source: "/Search", // <-- URL of the page you want to do the processing server-side
    minLength: 4 // <-- don't try to run the search until the user enters at least 4 chars
});

Автозаполнение автоматически добавит параметр строки запроса с именем «term» кURL, так что ваша страница поиска должна ожидать этого.Не уверен, какую серверную технологию вы используете, но, поскольку я являюсь разработчиком .NET, вот пример в ASP.NET MVC:)

public ActionResult Search(string term) {
    var results = db.Search(term); // <-- this is where you query your DB
    var jqItems = new List<jQueryUIAutoCompleteItem>();
    foreach (var item in results) {
        jqItems.Add(new jQueryUIAutoCompleteItem() {
            value = item.CompanyId.ToString(),
            id = item.CompanyId.ToString(),
            label = item.CompanyName
        });
    }
    return Json(jqItems.ToArray(), JsonRequestBehavior.AllowGet);
}

jQueryUIAutoCompleteItem - это просто контейнер данных, представляющий формат JSON, которыйПлагин автозаполнения ожидает.

public class jQueryUIAutoCompleteItem {
    public string value { get; set; }
    public string label { get; set; }
    public string id { get; set; }
}

Answer 3

Вы правы, что отправка всего списка из 60 000 записей на компьютер клиента не является лучшим решением.Вы заметите, что Google показывает только несколько самых популярных совпадений в своем автозаполнении, как и многие другие веб-сайты.

Вы можете сократить список, подождав, пока пользователь введет две или три буквы вместопоиск по первому.

Вы можете выполнить разбиение на страницы в списке (оно называется разными именами).То есть верните только лучшие 10 или 15 матчей.Пользователь может получить больше списка, прокручивая или нажав на ссылку «Показать больше результатов».Вы должны написать (или найти) весь код JavaScript для этого, конечно.

Answer 4

Возможно, будет немного поздно для этого поста, но для тех, кто его находит.Я создал плагин для jquery и элемент управления автозаполнением jqueryui, который работает с Foursquare.Вы можете прочитать пост и скачать плагин на Плагин Foursquare Autocomplete