จำกัด ผลลัพธ์ในการเติมข้อความอัตโนมัติ jQuery UI

ฉันใช้ jQuery UI การเติมข้อความอัตโนมัติ

 $("#task").autocomplete({
     max:10,
     minLength:3,
     source: myarray
 });          

พารามิเตอร์ max ไม่ทำงานและฉันยังได้ผลลัพธ์มากกว่า 10 รายการ ฉันพลาดอะไรไปรึเปล่า?

นี่คือเอกสารที่เหมาะสมสำหรับวิดเจ็ตjQueryUI ไม่มีพารามิเตอร์ในตัวสำหรับ จำกัด ผลลัพธ์สูงสุด แต่คุณสามารถทำได้อย่างง่ายดาย:

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

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

คุณสามารถจัดหาฟังก์ชันให้กับsourceพารามิเตอร์แล้วเรียกsliceใช้อาร์เรย์ที่กรองแล้ว

นี่คือตัวอย่างการทำงาน: http://jsfiddle.net/andrewwhitaker/vqwBP/

คุณสามารถตั้งค่าminlengthตัวเลือกเป็นค่าใหญ่หรือคุณสามารถทำได้โดย css เช่นนี้

.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}

เช่นเดียวกับที่ "Jayantha" กล่าวว่าการใช้ css จะเป็นวิธีที่ง่ายที่สุด แต่อาจจะดีกว่า

.ui-autocomplete { max-height: 200px; overflow-y: scroll; overflow-x: hidden;}

ข้อแตกต่างเพียงอย่างเดียวคือ "max-height" วิธีนี้จะช่วยให้วิดเจ็ตสามารถปรับขนาดให้มีความสูงน้อยลง แต่ไม่เกิน 200px

การเพิ่มคำตอบที่แอนดรูคุณยังสามารถแนะนำmaxResultsคุณสมบัติและใช้วิธีนี้:

$("#auto").autocomplete({ 
    maxResults: 10,
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(src, request.term);
        response(results.slice(0, this.options.maxResults));
    }
});

jsFiddle: http://jsfiddle.net/vqwBP/877/

สิ่งนี้จะช่วยให้สามารถอ่านโค้ดและบำรุงรักษาได้!

นี่คือสิ่งที่ฉันใช้

.ui-autocomplete { max-height: 200px; overflow-y: auto; overflow-x: hidden;}

อัตโนมัติล้นดังนั้นแถบเลื่อนจะไม่แสดงเมื่อไม่ควร

ฉันสามารถแก้ปัญหานี้ได้โดยเพิ่มเนื้อหาต่อไปนี้ในไฟล์ CSS ของฉัน:

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

หากผลลัพธ์มาจากแบบสอบถาม mysql การ จำกัด ผลลัพธ์ mysql โดยตรงจะมีประสิทธิภาพมากกว่า:

select [...] from [...] order by [...] limit 0,10

โดยที่ 10 คือจำนวนแถวสูงสุดที่คุณต้องการ

ฉันทำด้วยวิธีต่อไปนี้:

success: function (result) {
response($.map(result.d.slice(0,10), function (item) {
return {
// Mapping to Required columns (Employee Name and Employee No)
label: item.EmployeeName,
value: item.EmployeeNo
}
}
));

jQuery ช่วยให้คุณสามารถเปลี่ยนการตั้งค่าเริ่มต้นเมื่อคุณแนบการเติมข้อความอัตโนมัติเข้ากับอินพุต:

$('#autocomplete-form').autocomplete({
   maxHeight: 200, //you could easily change this maxHeight value
   lookup: array, //the array that has all of the autocomplete items
   onSelect: function(clicked_item){
      //whatever that has to be done when clicked on the item
   }
});

Plugin: jquery-ui-autocomplete-scroll พร้อม scroller และผลลัพธ์ที่ จำกัด นั้นสวยงาม

$('#task').autocomplete({
  maxShowItems: 5,
  source: myarray
});

ฉันได้ลองวิธีแก้ปัญหาทั้งหมดข้างต้นแล้ว แต่ของฉันใช้วิธีนี้เท่านั้น:

success: function (data) {
    response($.map(data.slice (0,10), function(item) {
    return {
    value: item.nome
    };
    }));
},

ไม่มีพารามิเตอร์สูงสุด

http://docs.jquery.com/UI/Autocomplete

ในกรณีของฉันมันใช้งานได้ดี:

source:function(request, response){
    var numSumResult = 0;
    response(
        $.map(tblData, function(rowData) {
            if (numSumResult < 10) {
                numSumResult ++;
                return {
                    label:          rowData.label,
                    value:          rowData.value,
                }
            }
        })
    );
},