我试图通过遵循jQuery UI文档来使自动完成功能正常工作。这是我第一次尝试这样的事情,所以我不能100%确定这里有什么问题。
JSON:
[
{
"plugin_name": "NoSwear"
},
{
"plugin_name": "AaaaahDeath"
},
{
"plugin_name": "aAntiSpam"
},
{
"plugin_name": "Abacus"
},
{
"plugin_name": "abag"
},
{
"plugin_name": "AbandonedCarts"
},
{
"plugin_name": "AbbaRules"
},
{
"plugin_name": "Abilities"
},
{
"plugin_name": "AbilityTrader"
},
{
"plugin_name": "AbitOfRealism"
}
]
javascript:
$(function() {
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#plugins")
.bind("keydown", function(event) {
if(event.keyCode === $.ui.keyCode.TAB && $(this).data("ui-autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
source: function(request, response) {
$.getJSON("bukget_json.php", {
term: extractLast(request.term)
}, response);
},
search: function() {
var term = extractLast(this.value);
if(term.length < 2) {
return false;
}
},
focus: function() {
return false;
},
select: function(event, ui) {
var terms = split(this.value);
terms.pop();
terms.push(ui.item.value);
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
HTML:
<div class="form-group ui-widget">
<label for="plugins">Plugins</label>
<input type="text" class="form-control" id="plugins" name="plugins" />
</div>
最后,所有这一切的结果是没有显示结果。以下是我所看到的屏幕截图:http://d.pr/i/yh5N。
答案 0 :(得分:0)
您可以查看以下内容:jsFiddle.
只需使用$("#plugins").autocomplete
而不是绑定和自动完成。
答案 1 :(得分:0)
使用此代码...而不是$.ajax
,您也可以使用$.get
$( "input.suggest-user" ).autocomplete({
source: function( request, response ) {
$.ajax({
dataType: "json",
type : 'Get',
url: 'yourURL',
success: function(data) {
$('input.suggest-user').removeClass('ui-autocomplete-loading'); // hide loading image
response( $.map( data, function(item) {
// your operation on data
}));
},
error: function(data) {
$('input.suggest-user').removeClass('ui-autocomplete-loading');
}
});
},
minLength: 3,
open: function() {
},
close: function() {
},
focus:function(event,ui) {
},
select: function( event, ui ) {
}
});