Название страны пробел название города
|
autocomplete из обьекта
Franky83,
<!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 = [{
country: "Russia",
city: "sankt-peterburg"
}];
$.ui.autocomplete.prototype._renderItem = function(ul, item) {
var re = new RegExp($.trim(this.term.toLowerCase()), "i");
var t = item.label.replace(re, "<span style='font-weight:600;color:#FF0000;'>" + "$&" + "</span>");
return $("<li></li>").data("item.autocomplete", item).append("<a>" + t + " " + item.city + "</a>").appendTo(ul)
};
$_searchQuery.autocomplete({
source: function(request, response) {
response($.map(data, function(item) {
return {
value: item.country + " " + item.city,
label: item.country,
city: item.city
}
}))
}
});
</script>
</body>
</html>
|
рони,
спасибо тебе:thanks: Выручил. |
Franky83, добавлена фильтрация, в подсказке будут только найденные страны
var $_searchQuery = $("#search-query");
var data = [{
country: "Russia",
city: "sankt-peterburg"
}];
$.ui.autocomplete.prototype._renderItem = function(ul, item) {
var re = new RegExp( "^" + $.ui.autocomplete.escapeRegex( this.term ), "i" );
var t = item.label.replace(re, "<span style='font-weight:600;color:#FF0000;'>" + "$&" + "</span>");
return $("<li></li>").data("item.autocomplete", item).append("<a>" + t + " " + item.city + "</a>").appendTo(ul)
};
$_searchQuery.autocomplete({
source: function(request, response) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response($.map(data, function(item) {
return {
value: item.country + " " + item.city,
label: item.country,
city: item.city
}
}).filter(function(item) {
return matcher.test( item.label );
}))
}
});
|
рони,
ну спасибо тебе огромное) |
| Часовой пояс GMT +3, время: 20:52. |