jquery ui-autocomplete関数を作成するには？

Question

私はそれが既に追加番号を提案すべきで、私のフォーム入力のためのjQuery UI-オートコンプリート機能を追加する必要があり、私のフォーム入力コードは

<div class="input-group"> 
     <span class="input-group-addon">Purchase No </span> 
     {!! Form::input('text', 'purchase_number', $purchase_number, array('id' => 'purchase_number', 'class' => 'input-lg form-control TabOnEnter', 'placeholder' => 'purchase_number')) !!} 
    </div> 

そして、私はjqueryのスクリプトを試してみましたが、

ありました

<script> 
$(function() { 

    $("#purchase_number").autocomplete({ 
    autoFocus: true, 
    minLength: 0, 
    select: function (event, ui) { 
    $('#purchase_number').val(ui.item.purchase_number); 
    } 
}) 
.focus(function() { 
    $(this).autocomplete("search", ""); 
}); 

$("#purchase_number").autocomplete().data("uiAutocomplete")._renderItem = function (ul, item) { 
    return $("<li>") 
    .append("<a>" + item.purchase_number + "</a>") 
    .appendTo(ul); 
}; 

}); 

</script> 

Answer 1

で試してみてください..私はオートコンプリート機能を行う際に非常に新しいですし、私はいくつかのマイナーなミスを行っているかもしれないと私はあなたが私はそれに確認する必要があり変更内容についての明確な説明を与えることを要求しますjqueryを使用して単純なコード。最初にあなたのページにjquery.js,jquery.ui.jsおよびjquery.ui.cssを含めてください。

$(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" 
 
    ]; 
 

 

 
    $("#purchase_number").autocomplete({ 
 
    \t source:availableTags 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div class="input-group"> 
 
       <label class="input-group-addon">Purchase No </label> 
 
       <input type ="text" id="purchase_number" /> 
 
      </div>

Answer 2

いくつかのシンプルなコードで試してみて、その後、ロジックを拡張し続けます！最小限のバージョンのコードについては、以下のスニペットを参照してください。

$("input#search-textbox").autocomplete({ 
 
    source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<input id="search-textbox" class="topic-picker ui-autocomplete-input" type="text" maxlength="100" name="q" acceskey="b" autocomplete="off" placeholder="enter text" role="textbox" aria-autocomplete="list" aria-haspopup="true">