Basic Jquery Autocomplete funktioniert nicht

Question

Die automatische Vervollständigung in meinem Code funktioniert nicht.

Unten ist mein 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 
    }); 
}); 

Außerdem wird der HTML-Code als Vorlage enthalten ist, wenn es einen Unterschied macht, am besten ich denke, es sollte nicht da ich es in document.ready Funktion einschließe.

Die Reihenfolge die Skripte enthalten sind, ist jquery.min.js gefolgt von jquery-ui.min.js und dann Bootstrap. Die Version für jquery ist 2.2.0

Answer 1

mit: $("#register[pincode]") Sie versuchen, den Namen Attribut zu verweisen, als ob es die ID waren. Ihr Element hat eine ID von 'Bereich'. Sie müssen verwenden:

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

Jquery id selector docs

Wenn Sie wirklich wollen, um den Namen verwenden, können Sie verwenden:

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

Hinweis: die einfachen Anführungszeichen um Ihren Namen Wert nicht vergessen oder es wird Fehler werfen (zumindest tut es das mit [] im Wert).

Attribute selector docs

Answer 2

Try this:

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

Working Fiddle