2017-04-01 57 views
0

我想用jQuery製作一個自動完成插件。目前,我這樣做:http://jsfiddle.net/2rpn5L29/1/dynamycally創建元素單擊jquery插件內的事件?

HTML:

<div class="form-group"><input type="text" class="input" value=""></div> 

JS:

(function ($) { 
    $.fn.searchPlugin = function(options) { 
    return this.each(function() { 
     var $this = $(this), data = options.data, search = $this.val().toLowerCase(), result = []; 

     function get(arg) { 
     result = []; 
     for(var i=0; i<data.length; i++) { 
      if(data[i]['name'].toLowerCase().indexOf(arg)!=-1) { 
      result.push(data[i]); 
      } 
      /* 
      for(key in data[i]) { 
       if(data[i][key].indexOf(search)!=-1) { 
       results.push(data[i]); 
       } 
      } 
     */ 
     } 
     } 

     function getById(id) { 
     return result[id].name; 
     } 

     function set() { 
     if(!$this.next('.autocomplete').length) { 
      $this.after('<div class="autocomplete"></div>'); 
     }else { 
      $this.next('.autocomplete').html(''); 
     } 
     for(var i = 0; i < result.length; i++) { 
      $this.next('.autocomplete').append('<div class="autocomplete__item" data-id="' + i + '">' + result[i].name + '</div>'); 
     } 
     } 

     $this.on('change keyup', function(){ 
     get($this.val().toLowerCase()); 
     set(result); 
     }); 

     $this.on('blur', function(){ 
     //$this.next('.autocomplete').html(''); 
     }); 


     $('.form-group').on('click', '.autocomplete__item', function(e){ 
     alert(getById($(this).data('id'))); 
     $this.val(getById($(this).data('id'))); 
     $this.next('.autocomplete').html(''); 
     }); 
    }); 
    }; 
}(jQuery)); 
$(function(){ 
    var data = [{'id': 1,'name': 'USA'},{'id': 2,'name': 'France'},{'id': 3,'name': 'Italy'}]; 

    $('.input').searchPlugin({ 
    data: data 
    }); 
}); 

當你輸入欄內部,比你點擊它出現在文本輸入USA,應該提醒選定的文本。但它只能在第二次點擊時起作用,而不是第一次。如何在第一次點擊時觸發點擊事件?

這是代碼部分,其提醒前人的精力所選文本:

$('.form-group').on('click', '.autocomplete__item', function(e){ 
    alert(getById($(this).data('id'))); 
    $this.val(getById($(this).data('id'))); 
    $this.next('.autocomplete').html(''); 
}); 

回答

0

$this.on('change keyup', function(){刪除change

由於您更新了關於keyup的建議,所以change無論如何都不是真正有用的。

當用戶離開輸入click上的建議,這change處理程序觸發第一和更改建議的元素(同樣的事情,是的......)

仍然click事件,其中change後會發生事件,但在change創建新元素之前...觸發舊不再出現元素,而不是新元素。

;)