Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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>
Ответить с цитированием
  #2 (permalink)  
Старый 13.09.2016, 23:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,034

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

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

Для примера , я в строке поиска нажал на букву "R" , скрипт нашел в массиве объект { country : "Russia", city: "sankt-peterburg"} мне вывалились подсказка (li) в котором 2 дива (один (Russia) под другим(sankt-peterburg) ) и подсвечиваются буквы в Russia и sankt-peterburg ( вторая не должна).
Ответить с цитированием
  #4 (permalink)  
Старый 13.09.2016, 23:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,034

Franky83,
замените
Сообщение от Franky83
country
на label а
Сообщение от Franky83
city
на value и всё
Ответить с цитированием
  #5 (permalink)  
Старый 13.09.2016, 23:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,034

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

Вторая буква r в подсказке в слове sankt-peterburg не должна подсвечиваться
Ответить с цитированием
  #7 (permalink)  
Старый 13.09.2016, 23:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,034

Franky83,
зачем тогда показывать sankt-peterburg?
Ответить с цитированием
  #8 (permalink)  
Старый 13.09.2016, 23:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,034

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

рони,
потому что он в одном объекте с country : "Russia" . Допустим основное поле для поиска country . В результате должен вывалиться список ,где в каждом элементе списка будет название страны и города.
Ответить с цитированием
  #10 (permalink)  
Старый 13.09.2016, 23:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,034

Franky83,
что останется в инпуте?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
отключить автозаполнение формы браузера udaff.es Элементы интерфейса 3 10.10.2017 17:48
Автозаполнение множества input в таблице galsan83 Общие вопросы Javascript 2 28.07.2015 08:23
Автозаполнение почтовых адресов для всех стран. dopelher Оффтопик 3 09.06.2011 07:00
jQuery Autocomplete: автозаполнение mshdn AJAX и COMET 1 13.04.2011 14:55
Динамический Select или Input (автозаполнение, добавление данных, обновление) kudinov Элементы интерфейса 0 21.09.2010 13:12