Autocomplete Without jQuery UI

问题

I'm using jQuery in my project and I need to implement autocomplete, but I'd like to avoid including jQuery UI widget, and hopefully use some specific external plugin. Could you please provide some examples/link? I have to query a remote JSON source that returns key-value couples.

回答1:

You can use the Ajax Autocomplete for jQuery plugin

And here is the full documentation

Code

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">

I created a demo of autocomplete here is the link jsbin.com

回答2:

You can use HTML5 'list' attribute in your input textbox and provide it a custom list of values by using 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>

If you didn't get it, Read more at http://www.cheezycode.com/2015/09/create-auto-complete-dropdown-using.html

There's a video as well for it Auto-Complete Without JQuery

回答3:

Here is one little autocomplete plugin written by me, please try: https://github.com/Fischer-L/autoComplt

Because I am not using jQuery and don't want to include some big libs just for one feature, I write for myself.

This plugin doesn't depend on other libs and doesn't have to include other CSS, so just including one JS script is enough.

P.S If you use it and find some thing which needs to be improved, please tell me :)

回答4:

I've started writing an auto complete / mentioning plugin in plain Javascript. I't not completed yet, but it could be a good start point.

github

回答5:

No need to include JQuery or any other third party library.

IP_autoComplete function will automatically concatinate field value to URL (1st parameter). For example textbox has value neeraj then arrjson.php?Name=neeraj will be triggered.

You can use IP_autocomplete function for static value as well. Just add # sign once at starting in your string (comma sepreated). E.g: "#val1,val2,val3"

arrjson.php should return json encoded string.

HTML:

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

Body

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

JSFiddle

Or simply you can give 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:

This the best multi category/feature Autocomplete plugin I have ever seen, it contains many features and gives you full control over 40 parameters to customize it as you wish. It is so dynamic and provides multi languages inputs with auto detection for RTL or LTR languages.

It doesn't use the JQuery and the code has very light size and so clean.

The demo page: http://www.muwakaba.com/plugins/autocomplete

You can use it with different configurations on the demo page and see all the parameters and the features.

Good luck!

回答7:

<script src="https://api.mqcdn.com/sdk/place-search-js/v1.0.0/place-search.js"></script>
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/place-search-js/v1.0.0/place-search.css"/>

Here is input :

<input type="search" id="place-search-input" placeholder="Start Searching..."/>

Javascript :

<script type="text/javascript">

var ps;
window.onload = function () {
    ps = placeSearch({
        key: 'lYrP4vF3Uk5zgTiGGuEzQGwGIVDGuy24',
        container: document.querySelector('#place-search-input'),
        useDeviceLocation: false,
        collection: [
            'poi',
            'airport',
            'address',
            'adminArea',
        ]
    });
}

回答8:

Try this, this will be help you

HTML

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

$(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

来源：https://stackoverflow.com/questions/19157249/autocomplete-without-jquery-ui

标签

javascript

jquery

ajax

autocomplete

jquery-autocomplete