bootstrap textbox autocomplete

Question

Ich benutze diese Bootstrap als meine GUI.

Ich habe dieses LINK bezogen auf mein Problem gesehen. Aber wenn ich den Code aus dem @KyleMit versuche, habe ich einen Fehler in meiner Konsole. Ich habe diese Uncaught TypeError: $(...).autocomplete is not a function

My current Bootstrap

aktuellen Code

$(".autocomplete").autocomplete({ 
 
      source: "/Controller/Action", 
 
      minLength: 1, 
 
      select: function (event, ui) { 
 
       if (ui.item) { 
 
        $(".autocomplete").val(ui.item.value); 
 
       } 
 
      } 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 

 
    <div class="form-group"> 
 
    <label>Languages</label> 
 
    <input class="form-control autocomplete" placeholder="Enter A" /> 
 
    </div> 
 

 
</div>

Answer 1

überprüfen diese Grund Beispiel für jquery die automatische Vervollständigung,

JS CODE,

$(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 
    }); 
    }); 

Ihre html,

<div class="ui-widget"> 
    <label for="tags">Tags: </label> 
    <input id="tags"> 
</div> 

Fügen Sie in Ihrem Kopf-Tag folgenden Code,

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

Sie jsfiddle finden Sie hier.