Javascript 使用jQuery ajax结果设置引导输入值

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

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

以及此

中的

标记列表：

<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结果列表（这很好），如果我点击任何结果列表，这个项目被设置为这个文本输入的值，另一个ajax请求被激发（这也很好），第二个ajax请求的结果（li列表）设置为新的#名称日期下拉列表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>


$（文档）.ready（函数（）{
$（'#typeahead'）。typeahead({
来源：功能（查询、流程）{
$.ajax({
url:“/functions/name autocomplete.php”，
键入：“POST”，
数据类型：“JSON”，
数据：“查询=”+query，
成功：功能（数据）{
过程（数据）；
}
});
},
displayText:功能（项目）{
退货项目
},
更新程序：函数（项）{
$（'#typeahead'）.val（item.value）；
$.ajax({
url:“/functions/name dates autocomplete.php”，
键入：“POST”，
数据类型：“JSON”，
数据：“查询=”+项，
成功：功能（数据）{
$（“#姓名日期下拉列表”）.html（数据）；
}
});
}
});
});

非常感谢！
首先，您得到了一个初始化的插件，原始元素可能不是以前的功能。要设置#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);

var listBuilder=''；
$（响应）。每个（函数（索引、元素）{
listBuilder+=''+element.title+'
'；
});
$（“#姓名日期下拉列表”）.html（listBuilder）；

---

希望这有帮助。

是第二次ajax调用“/functions/name-dates-autocomplete.php”的响应JSON？如果是的话，那么它是如何格式化的。很可能你必须循环这个JSON数组，然后用它来构建HTML。现在它不是JSON，但我可以在PHP端快速更改它。你能发布som示例如何循环抛出它并将其添加到ul列表中吗？我不太喜欢JS和jQuery。你知道为什么$（'#typeahead'）.val（item.value）；也不工作？谢谢！列表填充正在工作（无法将结果转换为JSON，不需要listbuilder），但$（'#typeahead'）.typeahead（'val'，item.value'））仍然不工作：（它没有设置任何内容：（好的，我在Github上找到的唯一一件事就是这个文档。也许可以尝试将项记录到控制台，看看属性值是否设置有趣，因为如果我在它前面放一个控制台输出：console.log（item）；$（'#typeahead'）。typeahead（'val'，item'）；the“item”具有正确的值…因此它必须与Bootstrap元素或jQuery命令有关。