Я бы посоветовал что-то, что не пытается переопределить некоторые основы автозаполнения.Возможно, рассмотрим небольшую корректировку.
Рабочий пример: https://jsfiddle.net/Twisty/ojkzbte4/61/
HTML
<div id="project-label">Select a project (type "j" for a start):</div>
<input id="project">
<button id="project-view" disabled="true">View</button>
<button id="project-edit" disabled="true">Edit</button>
CSS
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-icon {
float: left;
height: 32px;
width: 32px;
}
#project-description {
margin: 0;
padding: 0;
}
.ui-autocomplete .my-item {
background-color: #FFF;
}
JavaScript
window.view = function(p) {
console.log("view", p);
// Execute View of Project
};
window.edit = function(p) {
console.log("edit", p);
// Execute Edit of Project
};
$(function() {
var projects = [{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];
$("#project").autocomplete({
minLength: 0,
source: projects,
classes: {
"ui-state-active": "my-item"
},
focus: function(event, ui) {
//$("#project").val(ui.item.label);
console.log(event, ui, ui.item);
$(this).find(".ui-state-active").removeClass("ui-state-active");
return false;
},
select: function(event, ui) {
$("#project").val(ui.item.label);
$("#project-view, #project-edit").prop("disabled", false);
$("#project").data("project-id", ui.item.value);
//return false;
}
})
.autocomplete("instance")._renderItem = function(ul, item) {
var div = $("<div style='border:1px solid #ccc;'>");
$("<h4>").text(item.label).appendTo(div);
/*
$("<p>").text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.").appendTo(div);
$("<button>").html("View").click(function(e) {
e.preventDefault();
console.log("view", item);
// Perform View Function on item
}).appendTo(div);
$("<button>").html("Edit").click(function(e) {
e.preventDefault();
console.log("edit", item);
// Perform Edit Function on item
}).appendTo(div);
*/
return $("<li>")
.append(div)
.appendTo(ul);
};
$("#project-view, #project-edit").click(function(e) {
var func = $(this).attr("id").split("-")[1];
var projectId = $("#project").data("project-id");
console.log(func, projectId);
window[func](projectId);
});
});
Когда пользователь достигает поля ввода, состояние кнопки отключается.Когда они выполняют поиск и выбирают параметр, кнопки затем включаются и могут затем выполнять view() или edit() с переданным идентификатором проекта.
После фокусировки каждого элемента в меню, ui-state-activeдобавлен.Вы можете настроить или переопределить это в CSS, если считаете, что это необходимо.
Надеюсь, это поможет.