Question

我试图用jQuery创建一个自动完成插件。目前我这样做了：http://jsfiddle.net/2rpn5L29/1/

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('');
 });

Answer 1

从change删除$this.on('change keyup', function(){。

由于您更新了keyup上的建议，change无论如何都不是真的有用。

当用户在建议上将输入留给click时，此change处理程序首先触发并更改建议的元素（对于同样的事情，是的......）

仍然click事件发生在change事件之后，但在change创建新元素之前...已在旧的不再存在的情况下触发元素，而不是新元素。

）

在jquery插件中动态创建元素点击事件？

1 个答案: