bootstrap textbox autocomplete

Question

Я использую этот Bootstrap как мой GUI.

Я видел это LINK, связанный с моей проблемой. Но когда я пытаюсь выполнить код из @KyleMit, у меня есть ошибка в моей консоли. Я получил эту Uncaught TypeError: $(...).autocomplete is not a function

My current Bootstrap

Текущий код

$(".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

Проверить этот базовый пример Jquery автозаполнения,

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

Ваш HTML,

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

Включите следующий код в голову тег,

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

Вы можете найти jsfiddle здесь.