如何使jquery ui-autocomplete功能？

我需要添加的jQuery UI的自動完成功能，我的形式輸入，其中應建議已經添加了的數字，我的表單輸入代碼爲如何使jquery ui-autocomplete功能？

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

我很新的做自動完成功能，我可能會做一些小的錯誤，我請求你給什麼改變，我需要在它做出了明確的解釋..

來源

2017-05-09 Mani Raj

你可以給一個小提琴？ –

這是我的小提琴，https://jsfiddle.net/uyxje4a5/ .. ui自動完成類未應用於表單.. –

[jQuery自動填充示例]的可能重複（http://stackoverflow.com/問題/ 6558556/jQuery的自動完成-示例） –

與嘗試首先使用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>

來源

2017-05-09 06:15:35

嘗試用一些簡單的代碼，然後繼續延伸的邏輯！檢查下面的代碼片段的最小版本的代碼。

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

來源

2017-05-09 06:35:24

如何使jquery ui-autocomplete功能？

回答

相關問題