将额外的行附加到jqueryui自动完成（即使自动完成没有任何匹配） [英] Append extra row to jqueryui autocomplete (even if autocomplete doesn't have any matches)
问题描述
如何在jQueryUI自动完成结果中添加额外的行？我已经实现了添加其他链接到jquery ui自动完成列表如下所示，但如果自动完成没有任何匹配，它将不会显示额外的行。
How should an extra row be added to the jQueryUI Autocomplete results? I've implemented Add additional link to jquery ui autocomplete list as shown below, but it will not display the extra row if autocomplete doesn't have any matches.
我尝试过的...
为了在jQueryUI自动完成结果中追加一行，我想出了下面的脚本。使用以下内容添加额外行：
To append an extra row to the jQueryUI autocomplete results, I came up with the below script. The extra row is added using the following:
open: function( event, ui ) {
$('<li id="add-new">Add New</li>')
.on('click', function(event) {$("#dialog-add-new").dialog("open");})
.appendTo('ul.ui-autocomplete');
}
我的实施有三个问题：
- 如果没有与所选文本匹配的结果，则不会显示新行。在输入中键入开，您将看到它。在输入中键入xx，不显示。我想我可以让服务器填充它，但似乎是浪费，而宁愿在客户端进行。
- 如果我有两个
ul可能会出现问题页面上有.ui-autocomplete？ - 添加的行与自动完成行的外观不同。
第一项是最关键的。即使Autocomplete没有任何结果，如何将额外的行添加到jQueryUI自动完成结果中？
The first item is the most critical. How should an extra row be added to the jQueryUI Autocomplete results even if Autocomplete doesn't have any results?
请参阅 http://jsbin.com/quyexu/1/ 获取以下脚本的现场演示。您可以忽略有关对话框的部分，因为它似乎正在工作。谢谢
Please see http://jsbin.com/quyexu/1/ for a live demo of the below script. You could ignore the part regarding the dialog as it seems to be working. Thank you
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
var source = [
{value: "one",id: 1},
{value: "two",id: 2},
{value: "three",id: 3}
];
$(function(){
$("#autocomplete").autocomplete({
source: source,
minLength: 1,
focus: function( event, ui ) {event.preventDefault();$(this).val( ui.item.label );},
select: function(event, ui) {
console.log(ui)
$(this).val('');//.blur();
event.preventDefault(); // cancel default behavior which updates input field
$("#my-list").append('<li data-id="'+ui.item.id+'">'+ui.item.value+'</li>');
},
open: function( event, ui ) {
console.log(event,ui,this);
$('<li id="add-new">Add New</li>')
.on('click', function(event) {$("#dialog-add-new").dialog("open");})
.appendTo('ul.ui-autocomplete');
}
});
$("#dialog-add-new").dialog({
autoOpen: false,resizable: false,height: 200,width: 380, modal: true,
open : function() {},
buttons : [
{
text : 'ADD NEW',
"class" : 'green wide',
click : function() {
//Use Ajax to save value and get associated ID
var name=$('#new-name').val();
var id=123;
$("#my-list").append('<li data-id="'+id+'">'+name+'</li>');
$("#autocomplete").val('').focus();
$(this).dialog("close");
}
},
{
text : 'CLOSE',
"class" : 'gray',
click : function() {$(this).dialog("close");}
}
]
});
});
</script>
</head>
<body>
<input type="text" id="autocomplete" />
<ul id="my-list"></ul>
<div id="dialog-add-new" class="dialog" title="Add New">
<form>
<input type="text" name="new-name" id="new-name" />
</form>
</div>
</body>
</html>
推荐答案
要添加额外的行，请使用响应事件。 http://api.jqueryui.com/1.10/autocomplete/#event-response
To add an extra row, use the response event. http://api.jqueryui.com/1.10/autocomplete/#event-response
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
var source = [
{value: "one",id: 1},
{value: "two",id: 2},
{value: "three",id: 3}
];
$(function(){
$("#autocomplete").autocomplete({
source: source,
minLength: 1,
focus: function( event, ui ) {event.preventDefault();$(this).val( ui.item.label );},
select: function(event, ui) {
console.log(ui)
$(this).val('');//.blur();
event.preventDefault(); // cancel default behavior which updates input field
if(ui.item.id===0){$("#dialog-add-new").dialog("open");}
else {$("#my-list").append('<li data-id="'+ui.item.id+'">'+ui.item.value+'</li>');}
},
response: function( event, ui ) {
console.log(event,ui,this);
ui.content.push({value:"Add New", id:0, label:"Add New"});
}
});
$("#dialog-add-new").dialog({
autoOpen: false,resizable: false,height: 200,width: 380, modal: true,
open : function() {},
buttons : [
{
text : 'ADD NEW',
"class" : 'green wide',
click : function() {
//Use Ajax to save value and get associated ID
var name=$('#new-name').val();
var id=123;
$("#my-list").append('<li data-id="'+id+'">'+name+'</li>');
$("#autocomplete").val('').focus();
$(this).dialog("close");
}
},
{
text : 'CLOSE',
"class" : 'gray',
click : function() {$(this).dialog("close");}
}
]
});
});
</script>
</head>
<body>
<input type="text" id="autocomplete" />
<ul id="my-list"></ul>
<div id="dialog-add-new" class="dialog" title="Add New">
<form>
<input type="text" name="new-name" id="new-name" />
</form>
</div>
</body>
</html>
这篇关于将额外的行附加到jqueryui自动完成（即使自动完成没有任何匹配）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
