在 jquery 的自动完成中添加具有空值的自定义项
Add custom item with null value in jquery's autocomplete
使用jQuery's autotomplete widget,如果没有匹配的条件,我想添加一项。该项目添加得很好,但我面临的问题是我无法将该项目的值设置为 null
。我得到的是项目的 value
与 label
具有相同的文本
示例代码:
source: function(request, response)
{
//suggestions prefilled via AJAX...
var items = [];
if(suggestions.length)
{
for(var i in suggestions)
{
var item = suggestions[i];
item.value = suggestions[i].id;
item.label = suggestions[i].text;
items.push(item);
}
}
else
{
var item = {
value : null,
label : "some text..."
};
items.push(item);
}
response(items);
}
当我控制所选项目时,这是我得到的:
select: function(event, ui)
{
console.log(ui.item.value);
//if item's value was set to null, then label
//if item's value was set to 0, then label
//if item's value was set to "", then label
//if item's value was set to 123, then 123
}
编辑:显然这在历史上的某个时刻奏效了...
在这个 fiddle with latest jquery and jquery ui the problem is present, but in this one 和 jquery 1.10.4 中,最后一个 jquery ui 以我想要的方式工作。
简短的回答,当列表中有 1 个项目来自 select 时,它似乎会忽略它。
示例:
https://jsfiddle.net/Twisty/6oa0yg24/2/
$(function() {
var items = [{
value: 1,
label: 'neo'
},
{
value: 2,
label: 'trinity'
},
{
value: 3,
label: 'morpheus'
},
{
value: null,
label: 'smith'
},
{
value: undefined,
label: 'switch'
},
{
value: "",
label: 'tank'
}
];
$("#autocomplete").autocomplete({
source: items,
select: function(e, ui) {
console.log(ui.item.value);
}
});
});
如果我们输入 t
,我们会得到一些匹配,而 select smith
,则该值留空。如果我们键入 sm
,现在唯一的选项是 smith
,然后添加 "smith" 作为值。为什么?我不知道,但我测试了所有三种情况,并且每种情况都做到了。很确定它归结为这些行(https://code.jquery.com/ui/1.12.1/jquery-ui.js 中的 5864 - 5869):
// reset the term after the select event
// this allows custom select handling to work properly
this.term = this._value();
this.close( event );
this.selectedItem = item;
我想如果你愿意的话,你可以用 Widget Factory 覆盖它。
使用jQuery's autotomplete widget,如果没有匹配的条件,我想添加一项。该项目添加得很好,但我面临的问题是我无法将该项目的值设置为 null
。我得到的是项目的 value
与 label
示例代码:
source: function(request, response)
{
//suggestions prefilled via AJAX...
var items = [];
if(suggestions.length)
{
for(var i in suggestions)
{
var item = suggestions[i];
item.value = suggestions[i].id;
item.label = suggestions[i].text;
items.push(item);
}
}
else
{
var item = {
value : null,
label : "some text..."
};
items.push(item);
}
response(items);
}
当我控制所选项目时,这是我得到的:
select: function(event, ui)
{
console.log(ui.item.value);
//if item's value was set to null, then label
//if item's value was set to 0, then label
//if item's value was set to "", then label
//if item's value was set to 123, then 123
}
编辑:显然这在历史上的某个时刻奏效了...
在这个 fiddle with latest jquery and jquery ui the problem is present, but in this one 和 jquery 1.10.4 中,最后一个 jquery ui 以我想要的方式工作。
简短的回答,当列表中有 1 个项目来自 select 时,它似乎会忽略它。
示例:
https://jsfiddle.net/Twisty/6oa0yg24/2/
$(function() {
var items = [{
value: 1,
label: 'neo'
},
{
value: 2,
label: 'trinity'
},
{
value: 3,
label: 'morpheus'
},
{
value: null,
label: 'smith'
},
{
value: undefined,
label: 'switch'
},
{
value: "",
label: 'tank'
}
];
$("#autocomplete").autocomplete({
source: items,
select: function(e, ui) {
console.log(ui.item.value);
}
});
});
如果我们输入 t
,我们会得到一些匹配,而 select smith
,则该值留空。如果我们键入 sm
,现在唯一的选项是 smith
,然后添加 "smith" 作为值。为什么?我不知道,但我测试了所有三种情况,并且每种情况都做到了。很确定它归结为这些行(https://code.jquery.com/ui/1.12.1/jquery-ui.js 中的 5864 - 5869):
// reset the term after the select event
// this allows custom select handling to work properly
this.term = this._value();
this.close( event );
this.selectedItem = item;
我想如果你愿意的话,你可以用 Widget Factory 覆盖它。