CODEWITHSUNDEEP
javascriptjqueryhtmlautocomplete
Anshul Verma
Anshul Verma

Reputation: 1091

Basic Jquery autocomplete not working

The auto complete in my code is not working.

Below is my HTML code: 

<div class="form-group ui-widget">
   <label for="input" class="control-label font-12 font-blue">Enter your Area  <span class="req">*</span></label>
   <input class="form-control ui-autocomplete-input" required="required" placeholder="Enter your Area" name="register[pincode]" id="area">
</div>

JS 

$(document).ready(function() {
    var areas = ["States", "Australia", "Indies"];
    $("#register[pincode]").autocomplete({
        source: areas
    });
});

Moreover, the html code is being included as a template, if it makes a difference, ideally I think it should not since I am including it in document.ready function.

The order the scripts are included is jquery.min.js followed by jquery-ui.min.js and then bootstrap. The version for jquery is 2.2.0

Upvotes: 1

Views: 1414

Answers (2)

scrappedcola
scrappedcola

Reputation: 10572

With: $("#register[pincode]") You are trying to reference the name attribute as if it were the id. Your element has an id of 'area'. You need to use:

$("#area").autocomplete({
    source:areas
});

Jquery id selector docs

If you really wish to use the name you can use:

$("input[name='register[pincode]']").autocomplete({
    source:areas
});

Note: Don't forget the single quotes around your name value or it will throw errors (well at least it does with [] in the value).

Attribute selector docs

Upvotes: 2

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Try this:

$( function() {
    var availableTags = ["States", "Australia", "Indies"]
    $( "#area" ).autocomplete({
      source: availableTags
    });
});

Working Fiddle

Upvotes: 2

Related Questions