Показать сообщение отдельно
  #1 (permalink)  
Старый 13.09.2016, 22:41
Интересующийся
Отправить личное сообщение для Franky83 Посмотреть профиль Найти все сообщения от Franky83
 
Регистрация: 11.09.2016
Сообщений: 11

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>
Ответить с цитированием