2016-09-19 8 views
0

У меня есть элемент автозаполнения, который работает, когда первый набор автозаполненных «предложений» отображается из моего пользовательского источника данных.jquery autocomplete - Добавляемые объекты с кликом

У меня есть механизм, который определяет, когда свиток находится в самом низу, и в этом случае дополнительные данные загружаются и добавляются к элементу автозаполнения UL.

// This loads more data when scroll bar reaches the bottom of autocomplete suggestion list. 
$(".autocomplete ul", $MyForm).bind('scroll', function() { 
       var $this = $(this); 
       if ($this.scrollTop() > maxScrollTopLength) { 
        maxScrollTopLength = $this.scrollTop(); 
        if (!currentCallInProgress && maxScrollTopLength > $this[0].scrollHeight - $this.height() - settings.bottomScrollLength) { 
         skipToken += 1; 
         // search for suggestions based on scroll movement. 
         loadMoreItems(pageSearch.$query.val()); 
        } 
       } 
      }); 

Проблема заключается в следующем:

Прилагаемые пункты не кликабельны, хотя они появляются в списке. Что я делаю неправильно?

Обратите внимание, что в методе, который обрабатывает загрузку добавленных элементов данных, нет объекта ответа для вызова (он вызывается для функции source:).

* Обновлено: *

Мой контроль автозаполнения реализует источник: как это:

source: function (request, callback) { 
    loadData(request.term, callback); 
    // loadData basically makes an $.ajax call to retrieve data, and calls - 
    // callback(results) 
} 

источник: функция (запрос, ответ) {

ответ

1

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

$("#myAutocompleteFieldId").autocomplete({ 
     source: initialValues.concat(newValues) 
    });  
}); 

... а затем добавьте записи непосредственно в UL автозаполнения. Таким образом, библиотека jquery ui будет знать, как правильно обрабатывать новые значения. Здесь я привел JSFiddle, чтобы проиллюстрировать, как это работает: https://jsfiddle.net/n3p3epkc/ Если вы наберете «j», вы увидите записи из исходного списка. Когда вы вводите «ja», список будет обновляться с дополнительными значениями.

+0

Спасибо за этот ответ. Я скоро проверю это и дам кредит, если он сработает! – AlvinfromDiaspar

+0

Не могли бы вы обновить свой ответ, включив в него мой сценарий (где я беру дополнительные данные на основе положения прокрутки)? – AlvinfromDiaspar

+0

Можете ли вы настроить JSFiddle, как работает ваш код, и я могу его отладить там? Есть некоторые части, которые отсутствуют, и я не уверен, как все в порядке. В случае вызова ajax вам нужно будет обновить источник в обратном вызове после их загрузки с сервера. – Sergiu

0

Я нашел красивое, элегантное решение для своей проблемы. В основном я устанавливаю переменную, называемую «добавление» в true, когда событие прокрутки вызывает поиск.

Когда результаты поиска возвращаются для «добавления», я просто объединяю список элементов в отдельный список.

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

Короче говоря, функция source: 2 выполняет две разные вещи, основанные на состоянии переменной «добавление», являющейся истинным или ложным.

Надеюсь, это поможет другим.

 Смежные вопросы

  • Нет связанных вопросов^_^