Clever Geek Handbook

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.

+3


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.

+3


source


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



https://github.com/loopj/jquery-tokeninput

+1


source


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

Function

IP_autoComplete

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.

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

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',this.id,event)">
0


source


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

<!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 need help implementing this please refer to the link

0


source






More articles:


All Articles