Cara membatalkan event select pada jquery ui autocomplete

Bagaimana cara membatalkan value dari hasil proses autocomplete jquery ui ?? Jadi dulu saya ambil data dengan autocomplete milik jquery ui dengan alur, jika hasil yang dipilih user adalah nilai X, saya cek terlebih dahulu apakah nilai X sudah ada pada pilihan sebelumnya ?? Jika sudah ada, batalkan. Jika belum simpan pada text tertentu.

Kode sederhananya seperti ini :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var ac_config={
  source: // url untuk handle ajax,    
  select: function(event,ui){ // handle event ketika memilih
    var part_no = ui.item.part_no;
    var check_duplicate = that.check_duplicate_part_over(part_no);
    if(!check_duplicate){
      that.show_item_list_rows(ui.item,no);
      $('.part_id'+no).val(ui.item.part_id);
    }else{
      alert('Part No Duplicate');
      $(this).val("");
    }
  },
  minLength:1
};
$('#idx').autocomplete(ac_config);

Pada kode diatas, saya menambahkan function check_duplicate_part_over ketika select event dilakukan si user. Fungsi itu untuk mengecek apakah ada duplicate part ? Jika ada, akan masuk ke blok else dimana saya coba paksa agar part no tidak masuk ke text input “idx”.

Proses pembatalan value dari nilai X pada “idx” tersebut ternyata tidak semudah yang saya kira, saya sudah coba menambahkan kode sederhana mengkosongkan value dari text autocomplete dengan perintah :

$(“#idx”).val(“”);

namun tidak berpengaruh sama sekali, searching dan ketemu cara handle nya. Saya tambahkan keluaran dari “select” event agar bernilai “false” dengan cara “return false;”. Dengan cara ini seperti kita batalkan saja event select sehingga text “idx” pun bisa kita kosongkan.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var ac_config={
  source: // url untuk handle ajax,    
            select: function(event,ui){
    var part_no = ui.item.part_no;
    var check_duplicate = that.check_duplicate_part_over(part_no);
    if(!check_duplicate){
      that.show_item_list_rows(ui.item,no);
      $('.part_id'+no).val(ui.item.part_id);
    }else{
      alert('Part No Duplicate');
      $(this).val("");
      return false;
    }
  },
  minLength:1
};
$('#idx').autocomplete(ac_config);

Kenapa bisa seperti itu ? Mari buka file autocomplete jquery ui [jquery.ui.autocomplete.js] lalu cari potongan kode ini :

1
2
3
if ( false !== this._trigger( "select", event, { item: item } ) ) {  
      this._value( item.value );
}

Terlihat pada kode diatas, jika trigger event “select” keluaran-nya false. Dan pembandingnya otomatis mengeluarkan false, karena false !== false ? Maka false. Sehingga tidak akan masuk ke blok if tersebut.

Sampai sini, semoga bisa bermanfaat 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: