JQuery — автозаполнение с предложениями AJAX PHP PostgreSQL
Я делаю автозаполнение, но когда я пишу что-либо в Input, у меня появляются все элементы, я хочу элементы, которые содержат напечатанные символы во Input.
Мой код:
var searchRequest = null;
$("#buscar").autocomplete({
maxLength: 5,
source: function (request, response) {
if (searchRequest !== null) {
searchRequest.abort();
}
searchRequest = $.ajax({
url: 'search.php',
method: 'post',
dataType: "json",
success: function (data) {
searchRequest = null;
response($.map(data.items, function (item) {
return {
value: item.name1,
label: item.name1
};
}));
}
}).fail(function () {
searchRequest = null;
});
}
});
Решение
Попробуй это:
source: function(request, response) {
response($.map(data.items, function(item) {
var term = request.term.toLowerCase(),
name = item.name.toLowerCase();
if (name.search(term) == 0 || item.code.indexOf(term.toUpperCase()) == 0) {
return {
label: item.name,
value: item.name
};
}
}).slice(0, 15)
);
},
Другие решения
попробуйте этот код *
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
$("#txtSearch").autocomplete({
source: function(request,response) {
$.ajax({
url: "results.php",
type: "POST",
dataType: "json",
data: { term: request.term },
success: function (data) {
response($.map(data, function (item) {
return { value:item.name, district:item.district , id: item.id
};
}))
}
})
},focus: function (event, ui) {
$("#txthid").val(ui.item.id);
$("#txtid").val(ui.item.district);
elements.autocompleteSearch.val(ui.item.name);
return false;
},
messages: {noResults: "", results: ""}
});
})
</script>
</head>
<body>
<form id="form1" runat="server" >
<div class="demo">
<div class="ui-widget">
<label for="txtSearch">Enter UserName: </label>
<input type="search" id="txtSearch" />
<label for="txtid">ID is: </label>
<input type="id" id="txtid" />
</div>
</form>
<form action="file2.html" method="LINK">
<input type="hidden" id="txthid" name="id">
<input type="submit" value="Home page" >
</form>
</body>
</html>