2017-01-08 77 views
0

我有一个Bootstrap Typeahead函数,我想定制一点点。如果用户点击结果下拉列表中的任何项目,用户将被重定向到一个子页面。该预输入功能是伟大的工作,在下拉列表中填充没有任何错误,这是一个例子什么是从PHP文件返回:TypeError:ui未定义jQuery

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

的想法是,“姓名”属性被显示给用户点击后,它会重定向到“url”属性。

的问题是,现在在我点击任何我得到这个错误的项目(火狐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> 

有人可以帮助我,请问这里有什么问题?

非常感谢!

+0

错误相当多说,有被传递到'select'功能在您的预输入配置没有第二个参数。你能指定你正在使用哪种typeahead库吗? – Schlaus

+0

好吧,我想问题是,你是如何将该选择函数附加到任何调用它的?你的代码的第一部分确实工作(调用一个php url)... – sweaver2112

+0

该库也在导入部分:bootstrap3-typeahead。我不是一个真正的jQuery/JS大师,所以它也可能是一个简单的冲突......但是,如果我添加或删除jquery-ui.min.js,这并没有帮助。 – VORiAND

回答

0

更新功能是解决办法:

$(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 
     }, 
     }); 
    }); 
    });