jquery - jQuery を使用してページ div コンテンツから入力データ ソース オプションを設定する

Question

jQueryを使用して、入力のデータソースリストに「場所」divのコンテンツを動的に入力したいと思います。うまく機能している Bootstrap typehead を使用していますが、データ ソース リストを動的にしたいと考えています。

ここにコードがあります

<input
    data-path=".location"
    type="text"
    value=""
    id="location-filter"
    placeholder="Filter By Location ie. New York"
    data-control-type="textbox"
    data-control-name="desc-filter"
    data-control-action="filter"
    data-provide="typeahead"
    data-items="4" 
    data-source='["New York","Los Angeles","Chicago"]'
/>


<div class="block">
    <div class="type">Administration</div>
    <div class="desc">School Administrator</div>
    <div class="company">Administration Services LLC</div>
    <div class="location">New York</div>
    <div class="date">November 23</div>
</div><!--/block-->

<div class="block">
    <div class="type">Construction</div>
    <div class="desc">Roofing Contractor</div>
    <div class="company">Raise The Roof Inc.</div>
    <div class="location">Chicago</div>
    <div class="date">November 24</div>
</div><!--/block-->

<div class="block">
    <div class="type">Designer</div>
    <div class="desc">Web Designer</div>
    <div class="company">Web Designz Inc.</div>
    <div class="location">Los Angeles</div>
    <div class="date">November 25</div>
</div><!--/block-->

Answer 1

これを行うには、次のものを持つ div からすべてのテキスト フィールドを取得しますclass="location"。

$(function () {
    var category_array = $(".location").map(function() {
                         return $(this).text();
                     }).get();

    var autocomplete = $('#location-filter').typeahead({source: category_array}); 
});   

配列から重複を削除するには:

$(function () {
    var category_array = $(".location").map(function() {
                         return $(this).text();
                     }).get();

    // Remove duplicates
    // Note - this assumes the exact same string (including uppercase/lowercase) 
    category_array = $.grep(category_array, function(v, k){
                return $.inArray(v, category_array) === k;
          });

    var autocomplete = $('#location-filter').typeahead({source: category_array}); 
});  

フィドルについては、こちらを参照してください。