สำหรับใครที่ใช้ jQuery ui ไอ้ตัว autocomplete แล้วต้องการแก้ไขอะไรเพิ่มเติม วันนี้ผมจะมาเขียนแปะไว้เตือนตัวเองเพื่อว่าอนาคตได้ใช้อีกหรือคนที่มองหาวิธีทำคล้ายๆกันต้องการเพิ่มเติมก็สามารถทำได้ครับ ติดตามในบทความนี้เลย
ปกติที่เราใช้กันอยู่เนี้ยหากเราต้องการเพิ่มเติมเช่นว่าจะให้มัน hilight ตัวที่ search ทำอย่างไร ต้องไปเขียนไว้ตรงไหน วันนี้ผมมีคำตอบครับดังนี้
[codesyntax lang=”javascript” title=”jQuery ui autocomplete”]
var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
$( "#autocomplete" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( tags, function( item ){
return matcher.test( item );
}) );
}
});
[/codesyntax]
และเราต้องการเพิ่มว่าเวลามันแสดงให้ hilight ไปด้วยเราต้องทำการ override method ในการแสดงผลของตัวมันด้วยโค้ดด้านล่างเลยครับ
[codesyntax lang=”javascript” title=”override method “]
$("element").data("autocomplete").menu.options.selected = function(event, ui) {
//สิ่งที่ต้องการเปลี่ยนแปลง
}
[/codesyntax]
โดยตัวแปร ui จะมีค่าต่างๆพวก label , value ให้อยู่แล้วเราสามารถเอามาปรับเปลี่ยนได้เลย ยกตัวอย่างเช่น
[codesyntax lang=”javascript”]
$("#element").data("autocomplete")._renderItem = function (ul, item)
{
var re = new RegExp("^" + this.term) ;
var t = item.label.replace(re,"" +
this.term +
"");
return $( "
" )
.data( "item.autocomplete", item )
.append( "" + t + "" )
.appendTo( ul );
};
[/codesyntax]
แค่นี้เราก็จะได้แหละจ้าสบายๆ
ฝากไว้อีกนิดหากมีการเพิ่มเติมอะไรแปลกๆที่ทำการ ใส่เพิ่มไปเองเช่น li บางอย่างที่มันไม่มีอยู่ใน List แล้วมี error ทำนองนี้
[codesyntax lang=”php”]
Uncaught TypeError: Cannot read property 'value' of undefined
[/codesyntax]
มันอาจจะผิดพลาดตรงที่เราเอาไอ้ li แปลกๆเข้าไปในหมู่ list นั้นๆครับให้ทำการ override อีกเช่นเคยแต่คราวนี้เป็น method focus ครับก็จะได้แหละ
[codesyntax lang=”javascript”]
$("#element").data("autocomplete").menu.options.focus = function(event,ui)
{
return false;
};
[/codesyntax]
จบจริงๆแหละจ้า สวัสดี
ถ้าคุณชอบบทความในเว็บนี้ และอยากสนับสนุนเรา เพียงแค่คุณสมัครรับข่าวสารด้านล่างจะได้รับสิทธิ์พิเศษก่อนใคร เราสัญญาว่าจะส่งบทความที่เป็นประโยชน์ต่อคุณอย่างแน่นอนครับ
