CODEWITHSUNDEEP
javascriptjqueryajaxautocompletejquery-autocomplete
Jumpa
Jumpa

Reputation: 4409

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.

Upvotes: 24

Views: 34843

Answers (8)

user6407136
user6407136

Reputation: 

<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',
        ]
    });
}

Upvotes: 0

Cheezy Code
Cheezy Code

Reputation: 1715

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

Upvotes: 24

moderns
moderns

Reputation: 650

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!

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

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

Upvotes: 12

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

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

Upvotes: 0

Reyraa
Reyraa

Reputation: 4274

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

Upvotes: 2

Fischer
Fischer

Reputation: 125

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

Upvotes: 7

S. S. Rawat
S. S. Rawat

Reputation: 6111

Try this, this will be help you

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

Upvotes: -11

Related Questions