Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   JQ автозаполнение (https://javascript.ru/forum/dom-window/64922-jq-avtozapolnenie.html)

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>

рони 13.09.2016 23:05
Franky83,
непонятно в чём проблема, может документацию почитать? либо расшифруйте это подробнее
Цитата:
Сообщение от Franky83
чтобы искало по целому объекту и в подсказку

Franky83 13.09.2016 23:15
Для примера , я в строке поиска нажал на букву "R" , скрипт нашел в массиве объект { country : "Russia", city: "sankt-peterburg"} мне вывалились подсказка (li) в котором 2 дива (один (Russia) под другим(sankt-peterburg) ) и подсвечиваются буквы в Russia и sankt-peterburg ( вторая не должна).

рони 13.09.2016 23:18
Franky83,
замените
Цитата:
Сообщение от Franky83
country
на label а
Цитата:
Сообщение от Franky83
city
на value и всё

рони 13.09.2016 23:19
Цитата:
Сообщение от Franky83
вторая не должна
не понял

Franky83 13.09.2016 23:23
Вторая буква r в подсказке в слове sankt-peterburg не должна подсвечиваться

рони 13.09.2016 23:26
Franky83,
:-? зачем тогда показывать sankt-peterburg?

рони 13.09.2016 23:27
Franky83,
и что должно быть в результате

Franky83 13.09.2016 23:34
рони,
потому что он в одном объекте с country : "Russia" . Допустим основное поле для поиска country . В результате должен вывалиться список ,где в каждом элементе списка будет название страны и города.

рони 13.09.2016 23:38
Franky83,
что останется в инпуте?

Franky83 13.09.2016 23:40
Название страны пробел название города

рони 14.09.2016 00:05
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>

Franky83 14.09.2016 00:10
рони,
спасибо тебе:thanks:
Выручил.

рони 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 14.09.2016 00:31
рони,
ну спасибо тебе огромное)


Часовой пояс GMT +3, время: 00:56.