jQuery自動完成代碼自定義

Question

我已經爲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建議極限，當我插入上面這段代碼中，只有兩個建議工作，但與「遞減」等功能亙古不變的工作。

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

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

我該如何合併，這樣我才能完成工作？請幫助

Answer 1

只需更改您的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/