jQuery自动完成搜索栏

时间:2015-02-05 03:07:20

标签: jquery autocomplete

我正在尝试设计一个自动完成搜索栏,除了我想要插入一个显示"没有搜索结果"的新功能外,一切正常。如果用户无法找到任何结果。我希望它显示在小部件本身中。我的意思是在自动完成窗口中。

我应该使用任何活动吗?我不知道。非常感谢任何帮助!

谢谢。

这里是我的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); 

1 个答案:

答案 0 :(得分:0)

我想你可以从这个例子中获得帮助:

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

Also you can Visit this link and i hope this helps you !