[How to] jQuery Autocomplete custom

jQuery ui logo

สำหรับใครที่ใช้ 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]

จบจริงๆแหละจ้า สวัสดี

พาพันขอบคุณ