Автозаполнение без jQuery UI

Я использую jQuery в своем проекте, и мне нужно реализовать автозаполнение, но я бы хотел избежать использования виджета jQuery UI и, надеюсь, использовать какой-то специальный внешний плагин. Не могли бы вы привести несколько примеров/ссылок? Я должен запросить удаленный источник JSON, который возвращает пары с ключом.

Ответы

Ответ 1

Вы можете использовать Ajax Autocomplete для плагина jQuery

И вот полная документация

код

SCRIPT

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.24/jquery.autocomplete.min.js"></script>
<script>
   a1 = $('#query').autocomplete({
         width: 448,
         delimiter: /(,|;)\s*/,
         lookup: 'Andorra,Azerbaijan,Bahamas,Bahrain,Benin,Bhutan,Bolivia,Bosnia Herzegovina,Botswana,Brazil,Brunei,Bulgaria,Burkina, Burundi,Cambodia,Cameroon,Canada,Cape Verde,Central African Rep,Chile,China,Colombia,Comoros,Congo,Congo {Democratic Rep},Costa Rica,Croatia,Cuba,Cyprus,Czech Republic,Denmark,Djibouti,East Timor,Ecuador,Egypt,El Salvador,Equatorial Guinea,Eritrea,Fiji,France,Georgia,Germany,Ghana,Greece,Grenada,Guatemala,Guinea,Guinea-Bissau,Guyana,Haiti,Honduras,Hungary,India,Iraq,Ireland {Republic},Ivory Coast,Jamaica,Japan,Kazakhstan,Kiribati,Korea North,'.split(',')
      }); 
    </script>

CSS

.text-field {
    -moz-box-sizing: border-box;
    border: 1px solid #EEEEEE;
    font-family: "Source Sans Pro",Arial,sans-serif;
    font-size: 0.73684em;
    font-weight: 600;
    height: 37px;
    margin: 0;
    padding: 5px;
    width: 100%;
}
.autocomplete-suggestion {
    overflow: hidden;
    padding: 2px 5px;
    white-space: nowrap;
}
.autocomplete-suggestions strong {
    color: #3399FF;
    font-weight: normal;
}
.autocomplete-selected{
  background:#F0F0F0;
}

HTML

 <input type="text" id="query" class="text-field valid" autocomplete="off" placeholder="Search here">

Я создал демо autocomplete здесь ссылка jsbin.com

Ответ 2

Вы можете использовать атрибут "список" HTML5 в текстовом поле ввода и предоставить ему настраиваемый список значений с помощью datalist.

<!DOCTYPE html>
<html>
<head>
<!--your stuff-->
</head>
<body>
<!--your stuff-->
<input type="text" id="txtAutoComplete" list="languageList"/><!--your input textbox-->
<datalist id="languageList">
<option value="HTML" />
<option value="CSS" />
<option value="JavaScript" />
<option value="SQL" />
<option value="PHP" />
<option value="jQuery" />
<option value="Bootstrap" />
<option value="Angular" />
<option value="ASP.NET" />
<option value="XML" />
</datalist>
</body>
</html>

Если вы этого не получили, прочитайте больше на http://www.cheezycode.com/2015/09/create-auto-complete-dropdown-using.html

Там также есть видео Автозаполнение без JQuery

Ответ 3

Вот один маленький плагин автозаполнения, написанный мной, попробуйте: https://github.com/Fischer-L/autoComplt

Поскольку я не использую jQuery и не хочу включать некоторые большие библиотеки только для одной функции, я пишу для себя.

Этот плагин не зависит от других библиотек и не должен включать другой CSS, поэтому достаточно включить только один JS script.

P.S Если вы его используете и найдете кое-что, что нужно улучшить, скажите мне:)

Ответ 4

Я начал писать автоматический полный/упоминающий плагин в простом Javascript. Я еще не закончен, но это может быть хорошей отправной точкой.

github

Ответ 5

Не нужно включать JQuery или любую другую стороннюю библиотеку.

Функция

IP_autoComplete автоматически преобразует значение поля в URL (1-й параметр). Например, текстовое поле имеет значение neeraj, тогда будет срабатывать arrjson.php?Name=neeraj.

Вы также можете использовать функцию IP_autocomplete для статического значения. Просто добавьте знак # один раз при запуске в вашей строке (запятая sepreated). Например: "# val1, val2, val3"

arrjson.php должен возвращать закодированную строку json.

HTML:

<script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js">

Тело

<input type="text" name="testautocomplete" id="testautocomplete" onkeypress="IP_autoComplete('arrjson.php?Name=',this.id,event)">

JSFiddle

Или просто вы можете указать static:

<input type="text" name="testneeraj" id="testneeraj" onkeyup="IP_autoComplete('#sachin bhalake,ishwar agam,mohsin khan,neeraj dhekale,sheetal dhekale,ajay bhalake',this.id,event)">

Ответ 6

Это лучший мультикомпонентный/функциональный плагин Autocomplete, который я когда-либо видел, он содержит много функций и дает вам полный контроль над 40 параметрами, чтобы настроить его по своему усмотрению. Он настолько динамичен и предоставляет многоязычные входы с автоматическим обнаружением для языков RTL или LTR.

Он не использует JQuery, и код имеет очень легкий размер и настолько чистый.

Демо-страница: http://www.muwakaba.com/plugins/autocomplete

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

Удачи!

Ответ 7

Попробуйте это, это поможет вам

HTML

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>

JS

$(function() {
    var availableTags = [
      "ActionScript", "AppleScript","Asp","BASIC","C","C++","Clojure",
      "COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java",
      "JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });

Fiddle here