始终在jQuery Autocomplete中显示特定选择，即使与输入不匹配也是如此 [英] Always show a specific choice in jQuery Autocomplete even if it doesn't match input
问题描述
我有一个jQuery自动完成功能(jquery ui版本1.8)，其中键入了一个名称.如果可用，我希望用户从列表中选择一个名称，因为这些是我们数据库中的所有者名称.但是，在某些情况下，他们需要添加新的所有者名称，在这种情况下，我希望他们从自动完成功能的下拉列表中选择添加新".问题是，如果我在自动完成源数据中包括添加新"作为选择，则它不会在自动完成下拉列表中显示为选择，因为它与用户在文本框中键入的内容不匹配. /p>
下面是javascript代码.我没有包括服务器端代码，但可以说服务器的结果在下拉列表中创建了一个列表，例如添加新内容，Betty，Bob，Cathy，Dan和Edward". 选择器"是文本类型的标准html输入字段.
$('.selector').autocomplete({
autoFocus: false,
minLength: 1,
focus: function (event, ui) {
$('.selector').val(ui.item.value);
return false;
},
select: function (event, ui) {
$('.selector').val(ui.item.value);
return false;
}
});
$('.selector').keyup(function(){
// Each time a new character is entered, recreate the drop down list by matching entered characters to beginning of first name field
$.ajax({
type: "POST",
url: "(url to c#.net asmx page and method)",
contentType: "application/json; charset=utf-8",
data: '{(various data parameters)}',
datatype: "json",
error: function (data) {
var data = $.parseJSON(data.responseText);
alert("Error: " + data.Message);
},
success: function (data, status, info) {
if (data.hasOwnProperty("d")) {
var nameList = data.d;
}
else {
var nameList = data;
}
$('.selector').autocomplete("option", "source", nameList);
}
});
});
我意识到我已经从ajax调用的url和data部分的javascript代码中削减了几个代码块，但是我认为这是可以的，因为获取自动完成功能的源"在这里不是问题. /p>
例如，当我输入字母b时，我需要在列表中看到添加新的，比尔，贝蒂"作为我的三个选择，但是现在我只看到比尔，贝蒂"因为添加新"中没有"b".
是否有关于如何获得添加新"选项的想法或解决方案，以便始终可用?
非常感谢您.
我认为Autocomplete将检索到的对象集合构建到无序列表中.就像->
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
<li class="ui-menu-item">
<a class="ui-corner-all">item 1</a>
</li>
<li class="ui-menu-item">
<a class="ui-corner-all">item 2</a>
</li>
<li class="ui-menu-item">
<a class="ui-corner-all">item 3</a>
</li>
</ul>
它还有一种方法可以检测何时通过open事件打开列表.
$('selector').autocomplete({
open: function(){
$('.ui-autocomplete').prepend('<li class="ui-menu-item"><a class="ui-corner-all ui-add-new"> Add New </a></li>');
}
});
您可以看到，当打开时，我们已经在自动完成下拉菜单中添加了一个列表项，因此您总是在列表顶部获得添加新项"(jQuery的.prepend()可以处理).
I have a jQuery autocomplete (jquery ui version 1.8) in which I type a name. When available, I want the user to select a name from the list as these are owner names from our database. However, there is the occassion where they will need to add a new owner name, and in this instance, I want them to chose "Add New" from the autocomplete's drop down list. The problem is, if I include "Add New" as a choice in my autocomplete source data, it does not show up as a choice in the autocomplete drop down list as it does not match what the user is typing in the text box.
Below is the javascript code. I am not including the server side code, but let's say the results from the server create a list in the drop down that such as "Add New, Betty, Bob, Cathy, Dan, Edward." The 'selector' is a standard html input field of type text.
$('.selector').autocomplete({
autoFocus: false,
minLength: 1,
focus: function (event, ui) {
$('.selector').val(ui.item.value);
return false;
},
select: function (event, ui) {
$('.selector').val(ui.item.value);
return false;
}
});
$('.selector').keyup(function(){
// Each time a new character is entered, recreate the drop down list by matching entered characters to beginning of first name field
$.ajax({
type: "POST",
url: "(url to c#.net asmx page and method)",
contentType: "application/json; charset=utf-8",
data: '{(various data parameters)}',
datatype: "json",
error: function (data) {
var data = $.parseJSON(data.responseText);
alert("Error: " + data.Message);
},
success: function (data, status, info) {
if (data.hasOwnProperty("d")) {
var nameList = data.d;
}
else {
var nameList = data;
}
$('.selector').autocomplete("option", "source", nameList);
}
});
});
I realize I've cut a couple of chunks out of the javascript code for the url and data portions of my ajax call, but I figured that was OK since getting my autocomplete's "source" isn't the issue here.
What needs to happen, is for example, when I type in the letter b, I need to see "Add New, Bill, Betty" as my three choices in the list but right now I only see "Bill, Betty" because there is no "b" in "Add New".
Any thoughts or solutions on how to get the "Add New" choice to always be available?
Thank you very much in advance.
I think Autocomplete builds the collection of objects retrieved into an unordered list. like ->
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
<li class="ui-menu-item">
<a class="ui-corner-all">item 1</a>
</li>
<li class="ui-menu-item">
<a class="ui-corner-all">item 2</a>
</li>
<li class="ui-menu-item">
<a class="ui-corner-all">item 3</a>
</li>
</ul>
It also has a method to detect when the list is opened with the open event.
$('selector').autocomplete({
open: function(){
$('.ui-autocomplete').prepend('<li class="ui-menu-item"><a class="ui-corner-all ui-add-new"> Add New </a></li>');
}
});
You can see that we've added a list item to the auto-complete dropdown menu when it opens, so that you always get 'Add New' at the top of the list (jQuery's .prepend() handles that).
这篇关于始终在jQuery Autocomplete中显示特定选择，即使与输入不匹配也是如此的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
