TypeError: ui 未使用 jQuery 定义答案

【问题标题】：TypeError: ui is undefined with jQueryTypeError: ui 未使用 jQuery 定义
【发布时间】：2017-05-23 00:57:33
【问题描述】：

我有一个 Bootstrap Typeahead 功能，我想稍微自定义一下。如果用户单击结果下拉列表中的任何项目，用户将被重定向到一个子页面。 typeahead 功能运行良好，下拉列表填充没有任何错误，这是从 php 文件返回的一个示例：

[{"name":"TEXT-ONE","url":"\/textone-postfix"},{"name":"TEXT-TWO","url":"\/texttwo-postfix"},{"name":"TEXT-THREE"
,"url":"\/textthree-postfix"}]

想法是，“name”属性显示给用户，点击后，它重定向到“url”属性。

问题是，当我点击任何项目后，我得到了这个错误（Firefox Firebug 控制台输出）：

TypeError: ui is undefined

这是我的 jQuery 函数，在此之前 .js 导入：

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/bootstrap/js/ie10-viewport-bug-workaround.js"></script>
    <script src="/bootstrap/js/bootstrap3-typeahead.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
    $(function() {
      $('#namesearch').typeahead({
        source: function(request, response) {
          $.ajax({
            url: '/functions/search-autocomplete.php',
            type: 'POST',
            dataType: 'JSON',
            data: 'query=' + request,
            success: function(data) {
              response($.map(data, function(item) {
                return {
                    url: item.url,
                    value: item.name
                }
              }))
            }
          })
        },
        displayText: function(item) {
            return item.value
        },
        select: function( event, ui ) {
          window.location.href = ui.item.url;
        }
      });
    });
    });
    </script>
  </body>

谁能帮帮我，这里有什么问题？

非常感谢！

【问题讨论】：

该错误几乎表明您的 typeahead 配置中没有第二个参数传递给 select 函数。你能具体说明你使用的是哪个 typeahead 库吗？
好吧，我想问题是，您如何将该选择功能附加到调用它的任何内容上？您的代码的第一部分确实有效（调用 php url）...
该库也在导入部分：bootstrap3-typeahead。我不是一个真正的 jQuery/JS 大师，所以它也可能是一个简单的冲突......但如果我添加或删除 jquery-ui.min.js 并没有帮助。
我也有下拉人口的问题，在这里你可以看到完整的代码：stackoverflow.com/questions/41531473/…

标签： javascript jquery twitter-bootstrap

【解决方案1】：

更新程序功能是解决方案：

$(document).ready(function() {
    $(function() {
      $('#namesearch').typeahead({
        source: function(request, response) {
          $.ajax({
            url: '/functions/search-autocomplete.php',
            type: 'POST',
            dataType: 'JSON',
            data: 'query=' + request,
            success: function(data) {
              response($.map(data, function(item) {
                return {
                    url: item.url,
                    value: item.name
                }
              }))
            }
          })
        },
        displayText: function(item) {
            return item.value
        },
        updater: function (item) {
                window.location.href = item.url
        },
      });
    });
    });

【讨论】：