twitter-bootstrap - bootstrap typeahead from a loop

Question

I currently get a list of cities from a loop that looks like this:

<label>City</label>
<select class="input-block-level" name="city">
     <option value=" ">Any</option>
     <!-- TMPL_LOOP Cities -->
     <option value="<!-- TMPL_VAR city_name -->">
     <!-- TMPL_VAR city_name -->
     </option>
     <!-- /TMPL_LOOP -->
</select>'

How would i convert this into a typeahead? I do not have the ability to change the loop code, so i have to work with what i have.

I tried this and did not work:

<input autocomplete="off" class="typeahead" type="text" 
data-provide="typehead"
data-items="4"
data-source="[
<!-- TMPL_LOOP Cities -->
"<!-- TMPL_VAR city_name -->",
<!-- /TMPL_LOOP -->
]" />

Answer 1

看来您的报价可能存在一些问题。试试这个语法（注意单引号）：

<input data-provide="typeahead" data-items="4" data-source='["purple", "monkey", "dishwasher"]' />

此外，您需要确保数组中没有任何尾随逗号（即["a", "b", "c",]），因为这会破坏 IE。

更新/替代解决方案

另一种方法是使用 javascript：

var src = [
    <!-- TMPL_LOOP Cities -->
    "<!-- TMPL_VAR city_name -->",
    <!-- /TMPL_LOOP -->
];

$('#myTypeahead').typeahead({
    source: src,
    items: 4
});

<input id="myTypeahead" type="text"/>