如何使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功能？

回答

相关问题