CODEWITHSUNDEEP
jqueryautocomplete
Shehabic
Shehabic

Reputation: 6877

Is there a way to use Autocomplete without JQuery UI

Is there a way to use autocomplete without JQuery UI cause JQuery UI's footprint is too large (including its CSS) ?

or is there any alternative plugin or something, I googled this a lot but didn't find any.

Upvotes: 4

Views: 11406

Answers (4)

Cheezy Code
Cheezy Code

Reputation: 1715

Refer below snippet for autocomplete without using jQuery. This is plain html5 with datalist tag works on 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 need help related to implement this, refer this link

Upvotes: 2

Neeraj Dhekale
Neeraj Dhekale

Reputation: 61

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

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

Upvotes: 0

wom
wom

Reputation: 180

Just found this facebook-style jQuery plugin that is currently maintained and doesn't require the bloat of jQuery UI

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

Upvotes: 1

Churk
Churk

Reputation: 4637

You can build your own that does not depend on JQuery UI, its a very simple idea of trigger field onchange(), issue an AJAX call to get result that matches what you typed so far, and populate some field with a div or drop down below or near it. And on select of the div or drop down, you populate your trigger field with selected value.

I know that Jquery Autosuggest does not use JQuery UI but does require JQuery.

Upvotes: 3

Related Questions