Question

我正在使用jQuery autocomplete plugin，而不是UI自动填充功能。我想在输入没有自动完成结果的内容时，会显示不可点击无结果消息。我怎么能这样做？

Answer 1

这是一个需要对jquery.autocomplete.js进行一些小编辑的解决方案。

在jquery.autocomplete.js中：

将函数hideResultsNow（）编辑为它首先调用emptyData（）

function hideResultsNow() {

    $('#emptyData').show();
    ...
}

更改输入字段上的按键绑定，以在每次按键后隐藏#emptyData

$input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) {

    $('#emptyData').hide();
    ...
}

选择成功后隐藏#emptyData（在它返回true之前）

function selectCurrent() {

    ...
    $('#emptyData').hide();
    return true;
}

然后，您需要在输入框下方的HTML中添加一个名为#emptyData的相同样式列表的div。这是我使用的测试页面的完整HTML。

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
  <script type="text/javascript" src="jquery.autocomplete.js"></script>
  <script>
  $(document).ready(function(){
    var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
  $("#example").autocomplete(data);

  });
  </script>

</head>
<body>
  API Reference: <input id="example" /> (try "C" or "E")


  <div id='emptyData' class='ac_results' style='display: none; position: absolute; width: 151px; top: 20px; left: 91px;'>
    <ul style="max-height: 180px; overflow: auto;">
      <li id='noDataMsg' >No Results</li>
    </ul>
  </div>

</body>
</html>

#emptyData的位置取自自动完成位置，CSS样式与正确答案不完全相同，但除此之外，我认为不应该有任何需要更改的内容。希望能解决你的问题。

Answer 2

我认为不是让autocomplete来执行ajax而是你自己可以做到这一点，然后将结果传递给自动完成，在这两者之间有一个简单的过滤器，因为没有来自服务器的结果。

var input = $('input.autocomplete');
var inputLimit = 10;

// Create warning message and hide it
var warning = $('<p></p>').insertAfter(input).text('No results').addClass('warning').hide();

input.keyup(function(){
    warning.hide();

    $.get('url.php', {q: this.value, limit: inputLimit}, function(data){
        if(data){
            input.autocomplete(data);
        } else {
            warning.show();
        }
    }
});

当然，警告不会出现在自动填充字段本身中，但这是我能想到的没有修改插件源的最佳解决方案。

Answer 3

这是1/2解决方案;如果没有结果，让你的AJAX调用返回字符串“No Results”。

要使单个结果不可点击，可能需要查看插件的来源。

在jquery autocomplete上显示无结果消息

3 个答案: