Форум

Franky83 · #11 (**permalink**) 13.09.2016, 23:40

Название страны пробел название города

рони · #12 (**permalink**) 14.09.2016, 00:05

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>

Franky83 · #13 (**permalink**) 14.09.2016, 00:10

рони,
спасибо тебе

Выручил.

рони · #14 (**permalink**) 14.09.2016, 00:21

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 );
}))
    }
});

Franky83 · #15 (**permalink**) 14.09.2016, 00:31

рони,
ну спасибо тебе огромное)

Форум

Справочник

Discord чат

Курсы javascript