Динамически добавлять новые параметры существующего пользовательского автозаполнения

Как я могу динамически добавить label в существующие категории в пользовательском автозаполнении пользовательского интерфейса jQuery? Я сделал обычай autocomplete как described here (jQuery UI docs for autocomplete):Динамически добавлять новые параметры существующего пользовательского автозаполнения

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Autocomplete - Categories</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
    .ui-autocomplete-category { 
    font-weight: bold; 
    padding: .2em .4em; 
    margin: .8em 0 .2em; 
    line-height: 1.5; 
    } 
    </style> 
    <script> 
    $.widget("custom.catcomplete", $.ui.autocomplete, { 
    _create: function() { 
     this._super(); 
     this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)"); 
    }, 
    _renderMenu: function(ul, items) { 
     var that = this, 
     currentCategory = ""; 
     $.each(items, function(index, item) { 
     var li; 
     if (item.category != currentCategory) { 
      ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
      currentCategory = item.category; 
     } 
     li = that._renderItemData(ul, item); 
     if (item.category) { 
      li.attr("aria-label", item.category + " : " + item.label); 
     } 
     }); 
    } 
    }); 
    </script> 
    <script> 
    $(function() { 
    var data = [ 
     { label: "anders", category: "" }, 
     { label: "andreas", category: "" }, 
     { label: "antal", category: "" }, 
     { label: "annhhx10", category: "Products" }, 
     { label: "annk K12", category: "Products" }, 
     { label: "annttop C13", category: "Products" }, 
     { label: "anders andersson", category: "People" }, 
     { label: "andreas andersson", category: "People" }, 
     { label: "andreas johnson", category: "People" } 
    ]; 

    $("#search").catcomplete({ 
     delay: 0, 
     source: data 
    }); 
    }); 
    </script> 
</head> 
<body> 

<label for="search">Search: </label> 
<input id="search"> 


</body> 
</html>

Приведенный выше код создает автозаполнения виджет. Но в некоторый момент времени мне нужно добавить новые параметры с label и category, например, когда моя БД обновляется с определенным значением. Как я могу изменить список доступных параметров моего существующего виджета автозаполнения?

источник

2015-12-31 Suhail Gupta

Что нужно добавить ярлык? Можете ли вы объяснить немного больше, что вы делаете, как вы это делаете, что происходит, и что вам нужно вместо этого? На данный момент это вопрос очень низкого качества. Пожалуйста, улучшите его. – JotaBe

Вы можете получить доступ к виджет API, как это:

$("#search").data('customCatcomplete')

И, в частности, вы можете получить доступ к массиву параметров таким образом:

$("#search").data('customCatcomplete').options.source

Так что вы можете сделать что-то вроде этого:

$("#search").data('customCatcomplete').options.source 
    .push({ label: "John", category: "Worker" })

И новый вариант и категория автоматически появятся в автозаполнении.

ПРИМЕЧАНИЕ: вы можете хранить API напрямую при создании виджета, чтобы получить к нему доступ из var, вместо того, чтобы искать его в .data. Или вы можете получить доступ к нужной опции, как в любом другом виджетах пользовательского интерфейса, например:

$("#search").catcomplete('option','source'); // GET 
$("#search").catcomplete('option','source', newData); // SET

источник

2015-12-31 12:12:33 JotaBe

Динамически добавлять новые параметры существующего пользовательского автозаполнения

ответ

Смежные вопросы