jQuery自动完成搜索栏

Question

我正在尝试设计一个自动完成搜索栏，并且一切正常，但是我想插入一个新功能，如果用户找不到任何结果，该功能将显示“无搜索结果”。 我希望将其显示在小部件本身中。 我的意思是在自动完成窗口中。

我应该使用任何事件吗？ 我不知道。 任何帮助深表感谢！

谢谢。

这是我的JavaScript

var SearchBar = (function($) {
var search_data = function( request, response ) {
 $.ajax({
    url: "/search.json",
    dataType: "json",
    type: "GET",            
    data: {q: request.term },
    success: function( data ) {
        response( $.map( data, function( item ) {
            return {
                label: item.label,
                id: item.id
              };
           }));
       }
   });
};

$("#searchfield").autocomplete({
    source: search_data,
    minLength: 1
 }); 

 };

}) (jQuery); 

Answer 1

我认为您可以从以下示例中获得帮助：

$(function() {
var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
    ];

var NoResultsLabel = "No Results";

$("#tags").autocomplete({
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(availableTags, request.term);

        if (!results.length) {
            results = [NoResultsLabel];
        }

        response(results);
    },
    select: function (event, ui) {
        if (ui.item.label === NoResultsLabel) {
            event.preventDefault();
        }
    },
    focus: function (event, ui) {
        if (ui.item.label === NoResultsLabel) {
            event.preventDefault();
        }
    }
});
});

您也可以访问此链接，希望对您有所帮助！