Question

我想用＆＃34; location＆＃34;的内容动态填充输入的数据源列表。 div使用jQuery。我正在使用Bootstrap typeahead，它工作得很好，但我想让数据源列表动态化。

这是代码

<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

您可以通过检索包含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}); 
});

点击此处查看fiddle。

使用jQuery从页面div内容填充输入数据源选项

1 个答案: