Jquery使用远程JSON中的多个值自动完成
Jquery autocomplete with multiple values from remote JSON
我想使用autocomplete()
-插件选择多个值。我确实从远程JSON文件中接收到的值。到目前为止,我可以得到1个值,但之后它就失败了。我的目标是选择多个值并存储ID,这样我就可以稍后发布这些值。
到目前为止,我有:
<input type="text" id="featured" autocomplete="on"></input>
<input type="hidden" value="" name="artist_id">
function split( val ) {
return val.split( /,'s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$("#featured").bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB && $( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}}).autocomplete({
minLength: 0,
source: function( request, response ) {
$.ajax({
url: App.APIO+'/i/search/artist?name='+request.term+'&featured=true',
dataType: "json",
success: function(data) {
var result = $.map(data.data, function(artist) {
return {value: artist.name, label: artist.name, artist_id: artist.artist_id};
});
response( result );
}
});
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var item = split( this.value );
// remove the current input
item.pop();
// add the selected item
item.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
item.push( "" );
this.value = item.join( ", " );
return false;
$('[name="artist_id"]').val(ui.item.artist_id); // somehow insert the artist_id here
}
});
现在我只能输入1个值并选择它,这样它就会显示"Lady Gaga",但在那之后我什么都不能输入,例如什么都没发生。我可以在我的网络选项卡中看到它试图加载
/artist?name=ladygaga%20%b&featured=true
如果我在选择第一个值后键入"b"作为示例。。。
那么我做错了什么?有人能帮我吗。。。
//首先用json数据填充变量"sourceList"
var sourceList = $.ajax //to fetch the data
//创建一个全局变量以访问选定的值
var selectedItems= [];
//定义多选自动完成文本框如下:
$("#inputID")
.bind("keydown", function(event) {// don't navigate away from the field on tab when selecting an item
if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) {
event.preventDefault();
}
})
.bind("blur", function(event) {
//var $autoCompleteInstance = $(this).autocomplete("instance");
var selectedObjects = [], currentText = $(this).html();
//if ($autoCompleteInstance.term !== undefined && $autoCompleteInstance.term !== "") {
if (currentText !== undefined && currentText !== "") {
$.each(currentText.split(","), function(index, currentValue) {
var temp = $.grep(sourceList, function(current) {
return current.name === currentValue.trim();
});
$.merge(selectedObjects, temp);
});
selectedItems = selectedObjects;
var valueField = [], textField = [];
$.each(selectedItems, function(i, e) { valueField.push(e.valueField) }); //Resource_Id
$.each(selectedItems, function(i, e) { textField.push(e.textField) });
this.value = valueField.join(", ");
$(this).attr("value", valueField.join(", "));
this.innerHTML = textField.length > 0 ? textField.join(", ") + ", " : "";
}
else {
this.innerHTML = this.value = ""; $(this).attr("value", "");
selectedItems = [];
}
})
.autocomplete({
minLength: 0,
source: function(request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(sourceList, extractLast(request.term)));
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
selectedItems.push(ui.item);
var valueField = [], textField = [];
$.each(selectedItems, function(i, e) { valueField.push(e.valueField) }); //Resource_Id
$.each(selectedItems, function(i, e) { textField.push(e.textField) });
this.value = valueField.join(", ");
$(this).attr("value", valueField.join(", "));
this.innerHTML = textField.join(", ") + ", ";
event.preventDefault();
$(this).focus();
placeCaretAtEnd(document.getElementById("attendees"));
//return false;
}
})
.data("ui-autocomplete")._renderItem = function(ul, value) {
return $("<li></li>").data("item.autocomplete", value).append('<span value=' + value.ValueField + '>' + value.TextField + '</span>').appendTo(ul); //Resource_Id
};
希望这有帮助:)
相关文章:
- 解析复杂的json-jquery
- 我应该使用哪个:json-jquery 或 json2.js
- php请求带有多个对象json-jquery
- JSON JQUERY未捕获类型错误:无法读取属性'长度'的未定义
- 在多层json Jquery中循环
- JSON / JQUERY - ajax post,如何在成功函数中处理 XML 数据
- Json jQuery 和 php 处理的值不正确
- JSON/jQuery/PHP:未捕获语法错误:意外的令牌:
- 缓存通过PHP/AAJX/JSON/jQuery加载的动态图像
- JSON Jquery大小写不敏感匹配
- 接收数据json/jquery
- Javascript json jquery无法获得自定义属性值
- Rails 3和Ajax/JSON/JQuery/直接DOM更新-与Scaffold程序一起使用
- 简单的模式JSON Jquery
- 迭代表列&构建JSON - jQuery
- 基于ID生成锚链接(JSON, jQuery)
- JSON jQuery数据变量
- get JSON - JQuery & PHP
- Ajax更改为JSON (Jquery离线+ Manifest) -离线web应用程序
- 尝试使用JSON - jQuery上传多个数据.为什么不工作呢?