jQuery自动完成代码自定义

时间:2014-03-31 14:18:40

标签: jquery autocomplete limit

我为jQuery自动完成制作了以下代码。

下面第一部分是一个代码,以便在我点击id #project的输入时得到建议。我也有第二部分代码限制了建议的数量。我如何合并它们,以便两个功能都可以工作。我把第二部分放在第一部分,但第一部分停止工作。

$(function() {
var projects = [
     {
        //your each suggestion link here
        value: "www.facebook.com",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library"  
        //your alternate texts here
    },
    {
        value: "jquery-ui 1 ",
        label: "jQuery UI 1",
        desc: "the official,  user ,interface, library for jQuery"           
    },
    {
        value: "jqueryme 2",
        label: "jQueryme 2",
        desc: "the negative, user interface, river, Maniram,for jQuery"         
    },      
    {
        value: "jqueryme 3",
        label: "jQueryme 3" ,
        desc: "the negative, user interface, river, Maniram,for jQuery"         
    },      
    {
        value: "jqueryme 4",
        label: "jQueryme 4",
        desc: "the negative, user interface, river, Maniram,for jQuery"         
    },      
    {
        value: "jqueryme 5",
        label: "jQueryme 5",
        desc: "the negative, user interface, river, Maniram,for jQuery"         
    },
    {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine"          
    }
];

function lightwell(request, response) {

function hasMatch(s) {
        return s.toLowerCase().indexOf(request.term.toLowerCase())!==-1;
    }
    var i, l, obj, matches = [];

    if (request.term==="") {
        response([]);
        return;
    }

    for  (i = 0, l = projects.length; i<l; i++) {
        obj = projects[i];
        if (hasMatch(obj.label) || hasMatch(obj.desc)) {
            matches.push(obj);
        }
    }
    response(matches);      

}

$( "#project" ).autocomplete({
    //number of characters to be typed for user here
    minLength: 3,
    source: lightwell,
    focus: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        return false;
    },
    select: function( event, ui ) {
        $( "#project" ).val( ui.item.label );          
        window.open(ui.item.value,'_self');            
        return false;
    }
})

.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li>" )
        .append( "<a>" + item.label )
        .appendTo( ul );
};  

});

显示建议限制为2的第二部分,当我在上面插入此代码时,只有两个建议有效,但其他功能与&#39; desc&#39;不起作用。

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

    response(results.slice(0, 2));
}
});

我怎么能合并在一起所以我可以完成工作?请帮忙

1 个答案:

答案 0 :(得分:0)

只需添加最终lightwell即可更改slice功能。

代码:

function lightwell(request, response) {

    function hasMatch(s) {
        return s.toLowerCase().indexOf(request.term.toLowerCase()) !== -1;
    }
    var i, l, obj, matches = [];

    if (request.term === "") {
        response([]);
        return;
    }

    for (i = 0, l = projects.length; i < l; i++) {
        obj = projects[i];
        if (hasMatch(obj.label) || hasMatch(obj.desc)) {
            matches.push(obj);
        }
    }
    response(matches.slice(0, 2));
}

演示:http://jsfiddle.net/IrvinDominin/VYy7U/