2014-06-27 5 views
0

Существует несколько тем по одной теме, но не полностью удовлетворил меня!jquery autocomplete динамический источник из атрибута данных

Я хочу, чтобы определить источник моей автозаполнения через атрибут данных, например, так:

<input data-behaviour='autocomplete' data-source='/path/to/source'> 

Я не могу получить его программно через source метод:

$ -> 
    $('[data-behaviour~=autocomplete]').autocomplete 
    source: (req, resp) -> 
     return $(this).data('source') 

Here является нерабочий сниппет, чтобы играть с ...

EDIT: обходной путь, который я нашел, - это установить его через create meth спосо:

$ -> 
    $('[data-behaviour~=autocomplete]').autocomplete 
    create: (event, ui) -> 
     $(this).autocomplete("option", "source", $(this).data('source')) 

Проверить это snippet

Но я не очень нравится этот подход, я уверен, что лучше может быть сделано

ответ

0

Я не знаком с CoffeeScript; jQuery UI automplete имеет опцию source, которая позволяет вам создавать пользовательские материалы; в вашем случае вы можете использовать третий вариант (функцию) с помощью request и установки параметра response.

Функция: третий вариант, обратный вызов, обеспечивает гибкость наиболее и может быть использована для подключения любого источника данных для автозаполнения. Обратный вызов получает два аргумента: объект запроса, с - свойство с одним термом, которое ссылается на значение, которое в настоящее время находится в текстовом вводе . Например, если пользователь вводит «новое yo» в поле города, термин Autocomplete будет равен «new yo». Ответный ответ, который ожидает один аргумент: данные, предлагаемые пользователю. Эти данные должны быть отфильтрованы на основе предоставленного термина и могут быть в любом из форматах, описанных выше, для простых локальных данных. Важно, когда обеспечивает пользовательский обратный вызов источника для обработки ошибок во время запроса . Вы всегда должны вызывать обратный вызов ответа, даже если вы столкнулись с ошибкой . Это гарантирует, что виджет всегда имеет правильное состояние . При фильтрации данных локально вы можете использовать встроенную функцию $ .ui.autocomplete.escapeRegex . Возьмем один строковый аргумент и выйдем из всех символов регулярных выражений, сделав результат безопасным для перехода к новому RegExp().

Ref: http://api.jqueryui.com/autocomplete/#option-source

Код:

$ -> 
    thisEl = $('[data-behaviour~=autocomplete]'); 
    $('[data-behaviour~=autocomplete]').autocomplete 
    source: (req, resp) -> 
     resp(thisEl.data('source')); 

только пример, вы должны реализовать шаблон фильтрации.

Демонстрация: http://codepen.io/anon/pen/gjmHn

+0

awesome! Я даже сделал это oneliner: http://codepen.io/jobwat/pen/vGlos - cheers – jobwat

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