| Franky83 |
13.09.2016 22:41 |
JQ автозаполнение
Добрый вечер!
В коде ниже выборка берётся с массива
var data = ["india", "usa", "canada", "japan", "uk", "south africa"];
и соответственно показывает результат по одному полю, но я хочу передать массив объектов и чтобы типа ;
var data = [{ country : countryName ,city: cityName }, { country : countryName ,city: cityName }, { country : countryName ,city: cityName } ];
вообщем большой список.
Хочу, чтобы искало по целому объекту и в подсказку также попадал инфа с объекта. Сталкивался кто то, есть идеи как реализовать?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.css"/>
<style>
#search-query {
width:300px;
padding:5px 10px;
margin-left:10px;
}
/****** jQuery Autocomplete CSS *************/
.ui-corner-all {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
.ui-menu {
border: 1px solid lightgray;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
background-color: white;
}
.ui-menu .ui-menu-item a {
color: #888;
display: block;
}
.ui-menu .ui-menu-item a:hover {
border: 1px solid lightgray;
}
.ui-menu .ui-menu-item:hover {
display: block;
text-decoration: none;
color: #3D3D3D;
cursor: pointer;
background-color: lightgray;
background-image: none;
border:0;
}
.ui-widget-content .ui-state-hover, .ui-widget-content .ui-state-focus {
border: 1px solid lightgray;
background-image: none;
background-color: lightgray;
font-weight: bold;
color: #3D3D3D;
}
</style>
</head>
<body>
<label>Search:</label>
<input id="search-query" type="text" />
<script>
var $_searchQuery = $('#search-query');
var data = ["india", "usa", "canada", "japan", "uk", "south africa"];
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
var re = new RegExp($.trim(this.term.toLowerCase()));
var t = item.label.replace(re, "<span style='font-weight:600;color:#5C5C5C;'>" + $.trim(this.term.toLowerCase()) +
"</span>");
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + t + "</a>")
.appendTo(ul);
};
$_searchQuery.autocomplete({
source: data
});
</script>
</body>
</html>
|