Is there a way to use Autocomplete without JQuery UI

Is there a way to use autocomplete without jQuery UI, causing the jQuery UI footprint to be too large (including its CSS)?

or is there some alternative plugin or something, I searched a lot but could not find it.


source to share

4 answers

You can create your own that doesn't depend on the JQuery UI, its a very simple onchange () trigger field idea, invoke an AJAX call to get the result that matches what you've typed so far, and populate any field with using a div or move down below or next to it. And when you select a div or drop down, you populate the trigger field with the selected value.

I know Jquery Autosuggest does not use JQuery UI, but requires JQuery.



Just found this facebook style jQuery plugin which is currently supported and does not require jQuery UI bloat



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



automatically converts the field value to URL (1st parameter). For example, a textbox has a value neeraj

, then it will fire arrjson.php?Name=neeraj


You can also use the IP_autocomplete function for a static value. Just add the # sign once on startup in your line (sepreated comma). For example: "# val1, val2, val3"

arrjson.php should return a json encoded string.


<script type="text/javascript" src="">



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


Or you can simply specify static:

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




Below is a snippet for autocomplete without using jQuery. This simple html5 with datalist tag works in all modern browsers.

<!DOCTYPE html>
<!--your stuff-->
<!--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" />


If you need help implementing this please refer to the link



All Articles