使用 jQuery ajax 结果设置 Bootstrap 输入值

Question

我想在 ajax 结果之后或之后设置两件事：这个输入标签的值：

<input type="text" id="typeahead" name='name'  placeholder='Name' class="form-control" data-provide="typeahead" autocomplete="off" />

和<li>标签列表在这个<ul>:

<div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                test label
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="name-dates-dropdown">
                <li>test</li>
              </ul>
            </div>

想法是这样的：我在#typeahead 输入标签上得到一个ajax 结果列表（这很好用），如果我点击任何结果列表，这个项目被设置为这个文本输入的VALUE 并且另一个 ajax 请求被触发（这也有效），第二个 ajax 请求（li 列表）的结果被设置为新的 #name-dates-dropdown innerHTML。遗憾的是没有一个设置功能起作用，我不知道为什么...... :(

我正在使用 Bootstrap 和 Bootstrap typeahead。

这是我的 jQuery 函数：

    <script type="text/javascript">
    $(document).ready(function() {
      $('#typeahead').typeahead({
        source: function (query, process) {
          $.ajax({
            url: '/functions/name-autocomplete.php',
            type: 'POST',
            dataType: 'JSON',
            data: 'query=' + query,
            success: function(data) {
              process(data);
            }
          });
        },
        displayText: function(item) {
            return item
        },
        updater: function (item) {
            $('#typeahead').val(item.value);
            $.ajax({
            url: '/functions/name-dates-autocomplete.php',
            type: 'POST',
            dataType: 'JSON',
            data: 'query=' + item,
            success: function(data) {
              $('#name-dates-dropdown').html(data);
            }
          });
        }
      });
    });
    </script>

非常感谢！

Answer 1

首先你有一个初始化的插件，原始元素可能不是以前的功能。要设置 #typeahead 的值，请使用

$('#typeahead').typeahead('val', item.value);

这就是 API 所说的。

第二个，如果你从第二个 ajax 调用中得到 json，像这样的结构

// your ajax response
[

    {"value":1,"title":"Whatever"},
    {"value":2,"title":"Whatever 2"},

]

然后你可以遍历它并构建列表

var listBuilder = '';
$(response).each(function(index, element){

   listBuilder += '<li data-value="' + element.value + '">' + element.title + '</li>';

});

$("#name-dates-dropdown").html(listBuilder);

希望这会有所帮助。