Стиль Facebook [закрытый] плагин автоматического заполнения JQuery
карта - не только потому, что это делает код более выразительным, но потому что это дало мне импульс читать немного больше об этом "функциональном программировании".
2 ответа
https://github.com/loopj/jquery-tokeninput
Я только что попробовал это, и его было действительно легко реализовать, используя страницу asp.net для вывода JSON (из параметров поиска) Затем вам нужно создать всего несколько строк Javascript (и настройки)
$(document).ready(function() {
$("#Users").tokenInput("../Services/Job/UnassignedUsers.aspx?p=<%= projectID %>&j=<%= jobID %>", {
hintText: "Begin typing the user name of the person you wish to assign.",
noResultsText: "No results",
searchingText: "Searching..."
});
});
Этот очень хорош! https://github.com/wuyuntao/jquery-autosuggest/
Как это использовать
Очевидно, что вам нужно убедиться, что у вас есть последняя версия библиотеки jQuery (по крайней мере. не ниже 1.3) уже загружена на вашу страницу. После этого все очень просто, просто добавьте следующий код на вашу страницу (не забудьте обернуть ваш код в функцию jQuery's ready):
$(function(){ $("input[type=text]").autoSuggest(data); });Приведенная выше строка кода применит автопредложение ко всем
inputэлементам на странице. Каждый из них будет использовать один и тот же набор Data. Если вы хотите иметь на странице несколько полей автопредложения, использующих разные наборы данных, убедитесь, что вы выбрали их отдельно. Например, this:$(function(){ $("div.someClass input").autoSuggest(data); $("#someID input").autoSuggest(other_data); });Выполнение вышеописанных действий позволит вам передавать различные параметры и различные наборы данных. Ниже приведен пример использования AutoSuggest с Data Object и другими различными опциями:
var data = {items: [ {значение: "21", имя: "Мик Джаггер"} { значение: "43", имя: "Джонни Сторм"}, { { value: "46", имя: "Ричард Хэтч"}, {значение: "54", имя: "Келли Слейтер"}, {значение: "55", имя: "Rudy Hamilton"}, {значение: "79", имя: "Майкл Джордан"} ]}; $("input[type=text]").autoSuggest(data.items, {selectedItemProp: "name", searchObjProps: "name"});