Как добавить дополнительную строку в результаты автозаполнения jQueryUI? Я реализовал Add additional link to jquery ui autocomplete list, как показано ниже, но он не отображает дополнительную строку, если автозаполнение не имеет совпадений.Добавить дополнительную строку в автозаполнение jqueryui (даже если автозаполнение не имеет совпадений)
То, что я пытался ...
Чтобы добавить дополнительный ряд к результатам jQueryUI автозаполнения, я придумал ниже сценарий. Дополнительная строка добавляется с помощью следующих:
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на странице? - Добавленный ряд не имеет того же вида, что и строки автозаполнения.
Первый пункт является самым критичным. Как добавить дополнительную строку в результаты автозаполнения jQueryUI, даже если Autocomplete не имеет никаких результатов?
См. http://jsbin.com/quyexu/1/ для демонстрации в реальном времени нижеприведенного сценария. Вы можете игнорировать часть диалога, поскольку она работает. Спасибо
<!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>
Я просто попытался использовать событие 'response' вместо' open', но не успех. – user1032531