2016-02-27 21 views
0

我在我的项目中使用了typeahead,并且工作正常。现在,我已经创建了一个列表,以便将来自typehead的选择添加到该列表中。这工作也很好。问题在于将所选项目添加到列表后,我不得不手动删除输入中的上一个选择。 .val("")显然不能用于打字。清除键入之后选择

这里是我的代码:

var $songlist = $('#song-list tr'), 
     $counter = 1, 
     $typeahead = $('input.typeahead'); 

    $typeahead.typeahead({ 
     ajax: "{{ url('/admin/music/typeahead') }}", 
     onSelect:function(item) { 
      //console.log(item); 
      $songlist.append("<td>"+ 
        $counter + '. ' + item.text + 
       "</td>" 
      ); 
      $typeahead.val(''); // -> does not work 
     } 
    }); 
+0

尝试使用this.val( '') – Shelim

+0

这并不正常工作。尽管在超时时间内使用相同的val('')',我发现了一些小问题。 – shaNnex

回答

0

编辑typeahead.js,找到下面的代码并替换:

这个$元 .VAL(this.updater(文本)) .change ();

与像一个空字符串:

此$元件 .VAL(this.updater(”“)) .change();

正如我在下面的代码已经证明

Typeahead.prototype = { 
     constructor: Typeahead, 
     //============================================================================================================= 
     // Utils 
     // Check if an event is supported by the browser eg. 'keypress' 
     // * This was included to handle the "exhaustive deprecation" of jQuery.browser in jQuery 1.8 
     //============================================================================================================= 
     eventSupported: function (eventName) { 
      var isSupported = (eventName in this.$element); 

      if (!isSupported) { 
       this.$element.setAttribute(eventName, 'return;'); 
       isSupported = typeof this.$element[eventName] === 'function'; 
      } 

      return isSupported; 
     }, 
     select: function() { 
      var $selectedItem = this.$menu.find('.active'); 
      if($selectedItem.length) { 
       var value = $selectedItem.attr('data-value'); 
       var text = this.$menu.find('.active a').text(); 

       if (this.options.onSelect) { 
        this.options.onSelect({ 
         value: value, 
         text: text 
        }); 
       } 
       this.$element 
        .val(this.updater(text)) //here you need to pass empty string 
        .change(); 
      } 
      return this.hide(); 
     }, 
     updater: function (item) { 
      return item; 
     }, 
     show: function() { 
      var pos = $.extend({}, this.$element.position(), { 
       height: this.$element[0].offsetHeight 
      }); 

      this.$menu.css({ 
       top: pos.top + pos.height, 
       left: pos.left 
      }); 

      if(this.options.alignWidth) { 
       var width = $(this.$element[0]).outerWidth(); 
       this.$menu.css({ 
        width: width 
       }); 
      } 

      this.$menu.show(); 
      this.shown = true; 
      return this; 
     }, 
     hide: function() { 
      this.$menu.hide(); 
      this.shown = false; 
      return this; 
     }, 
     ajaxLookup: function() { 

      var query = $.trim(this.$element.val()); 

      if (query === this.query) { 
       return this; 
      } 

      // Query changed 
      this.query = query; 

      // Cancel last timer if set 
      if (this.ajax.timerId) { 
       clearTimeout(this.ajax.timerId); 
       this.ajax.timerId = null; 
      } 

      if (!query || query.length < this.ajax.triggerLength) { 
       // cancel the ajax callback if in progress 
       if (this.ajax.xhr) { 
        this.ajax.xhr.abort(); 
        this.ajax.xhr = null; 
        this.ajaxToggleLoadClass(false); 
       } 

       return this.shown ? this.hide() : this; 
      } 

      function execute() { 
       this.ajaxToggleLoadClass(true); 

       // Cancel last call if already in progress 
       if (this.ajax.xhr) 
        this.ajax.xhr.abort(); 

       var params = this.ajax.preDispatch ? this.ajax.preDispatch(query) : { 
        query: query 
       }; 
       this.ajax.xhr = $.ajax({ 
        url: this.ajax.url, 
        data: params, 
        success: $.proxy(this.ajaxSource, this), 
        type: this.ajax.method || 'get', 
        dataType: 'json' 
       }); 
       this.ajax.timerId = null; 
      } 

      // Query is good to send, set a timer 
      this.ajax.timerId = setTimeout($.proxy(execute, this), this.ajax.timeout); 

      return this; 
     }, 
     ajaxSource: function (data) { 
      this.ajaxToggleLoadClass(false); 
      var that = this, items; 
      if (!that.ajax.xhr) 
       return; 
      if (that.ajax.preProcess) { 
       data = that.ajax.preProcess(data); 
      } 
      // Save for selection retreival 
      that.ajax.data = data; 

      // Manipulate objects 
      items = that.grepper(that.ajax.data) || []; 
      if (!items.length) { 
       return that.shown ? that.hide() : that; 
      } 

      that.ajax.xhr = null; 
      return that.render(items.slice(0, that.options.items)).show(); 
     }, 
     ajaxToggleLoadClass: function (enable) { 
      if (!this.ajax.loadingClass) 
       return; 
      this.$element.toggleClass(this.ajax.loadingClass, enable); 
     }, 
     lookup: function (event) { 
      var that = this, items; 
      if (that.ajax) { 
       that.ajaxer(); 
      } 
      else { 
       that.query = that.$element.val(); 

       if (!that.query) { 
        return that.shown ? that.hide() : that; 
       } 

       items = that.grepper(that.source); 


       if (!items) { 
        return that.shown ? that.hide() : that; 
       } 
       //Bhanu added a custom message- Result not Found when no result is found 
       if (items.length == 0) { 
        items[0] = {'id': -21, 'name': "Result not Found"} 
       } 
       return that.render(items.slice(0, that.options.items)).show(); 
      } 
     }, 
     matcher: function (item) { 
      return ~item.toLowerCase().indexOf(this.query.toLowerCase()); 
     }, 
     sorter: function (items) { 
      if (!this.options.ajax) { 
       var beginswith = [], 
        caseSensitive = [], 
        caseInsensitive = [], 
        item; 

       while (item = items.shift()) { 
        if (!item.toLowerCase().indexOf(this.query.toLowerCase())) 
         beginswith.push(item); 
        else if (~item.indexOf(this.query)) 
         caseSensitive.push(item); 
        else 
         caseInsensitive.push(item); 
       } 

       return beginswith.concat(caseSensitive, caseInsensitive); 
      } else { 
       return items; 
      } 
     }, 
     highlighter: function (item) { 
      var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&'); 
      if (item != undefined) 
       return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) { 
        return '<strong>' + match + '</strong>'; 
       }); 
      else 
       return 'No matches found!'; 
     }, 
     render: function (items) { 
      var that = this, display, isString = typeof that.options.displayField === 'string'; 

      items = $(items).map(function (i, item) { 
       if (typeof item === 'object') { 
        display = isString ? item[that.options.displayField] : that.options.displayField(item); 
        i = $(that.options.item).attr('data-value', item[that.options.valueField]); 
       } else { 
        display = item; 
        i = $(that.options.item).attr('data-value', item); 
       } 
       i.find('a').html(that.highlighter(display)); 
       return i[0]; 
      }); 

      if(that.autoSelect){ 
       items.first().addClass('active'); 
      } 

      this.$menu.html(items); 
      return this; 
     }, 
     //------------------------------------------------------------------ 
     // Filters relevent results 
     // 
     grepper: function (data) { 
      var that = this, items, display, isString = typeof that.options.displayField === 'string'; 

      if (isString && data && data.length) { 
       if (data[0].hasOwnProperty(that.options.displayField)) { 
        items = $.grep(data, function (item) { 
         display = isString ? item[that.options.displayField] : that.options.displayField(item); 
         return that.matcher(display); 
        }); 
       } else if (typeof data[0] === 'string') { 
        items = $.grep(data, function (item) { 
         return that.matcher(item); 
        }); 
       } else { 
        return null; 
       } 
      } else { 
       return null; 
      } 
      return this.sorter(items); 
     }, 
     next: function (event) { 
      var active = this.$menu.find('.active').removeClass('active'), 
       next = active.next(); 

      if (!next.length) { 
       next = $(this.$menu.find('li')[0]); 
      } 

      if (this.options.scrollBar) { 
       var index = this.$menu.children("li").index(next); 
       if (index % 8 == 0) { 
        this.$menu.scrollTop(index * 26); 
       } 
      } 

      next.addClass('active'); 
     }, 
     prev: function (event) { 
      var active = this.$menu.find('.active').removeClass('active'), 
       prev = active.prev(); 

      if (!prev.length) { 
       prev = this.$menu.find('li').last(); 
      } 

      if (this.options.scrollBar) { 

       var $li = this.$menu.children("li"); 
       var total = $li.length - 1; 
       var index = $li.index(prev); 

       if ((total - index) % 8 == 0) { 
        this.$menu.scrollTop((index - 7) * 26); 
       } 

      } 

      prev.addClass('active'); 

     }, 
     listen: function() { 
      this.$element 
       .on('focus', $.proxy(this.focus, this)) 
       .on('blur', $.proxy(this.blur, this)) 
       .on('keypress', $.proxy(this.keypress, this)) 
       .on('keyup', $.proxy(this.keyup, this)); 

      if (this.eventSupported('keydown')) { 
       this.$element.on('keydown', $.proxy(this.keydown, this)) 
      } 

      this.$menu 
       .on('click', $.proxy(this.click, this)) 
       .on('mouseenter', 'li', $.proxy(this.mouseenter, this)) 
       .on('mouseleave', 'li', $.proxy(this.mouseleave, this)) 
     }, 
     move: function (e) { 
      if (!this.shown) 
       return 

      switch (e.keyCode) { 
       case 9: // tab 
       case 13: // enter 
       case 27: // escape 
        e.preventDefault(); 
        break 

       case 38: // up arrow 
        e.preventDefault() 
        this.prev() 
        break 

       case 40: // down arrow 
        e.preventDefault() 
        this.next() 
        break 
      } 

      e.stopPropagation(); 
     }, 
     keydown: function (e) { 
      this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40, 38, 9, 13, 27]) 
      this.move(e) 
     }, 
     keypress: function (e) { 
      if (this.suppressKeyPressRepeat) 
       return 
      this.move(e) 
     }, 
     keyup: function (e) { 
      switch (e.keyCode) { 
       case 40: // down arrow 
       case 38: // up arrow 
       case 16: // shift 
       case 17: // ctrl 
       case 18: // alt 
        break 

       case 9: // tab 
       case 13: // enter 
        if (!this.shown) 
         return 
        this.select() 
        break 

       case 27: // escape 
        if (!this.shown) 
         return 
        this.hide() 
        break 

       default: 
        if (this.ajax) 
         this.ajaxLookup() 
        else 
         this.lookup() 
      } 

      e.stopPropagation() 
      e.preventDefault() 
     }, 
     focus: function (e) { 
      this.focused = true 
     }, 
     blur: function (e) { 
      this.focused = false 
      if (!this.mousedover && this.shown) 
       this.hide() 
     }, 
     click: function (e) { 
      e.stopPropagation() 
      e.preventDefault() 
      this.select() 
      this.$element.focus() 
     }, 
     mouseenter: function (e) { 
      this.mousedover = true 
      this.$menu.find('.active').removeClass('active') 
      $(e.currentTarget).addClass('active') 
     }, 
     mouseleave: function (e) { 
      this.mousedover = false 
      if (!this.focused && this.shown) 
       this.hide() 
     }, 
     destroy: function() { 
      this.$element 
       .off('focus', $.proxy(this.focus, this)) 
       .off('blur', $.proxy(this.blur, this)) 
       .off('keypress', $.proxy(this.keypress, this)) 
       .off('keyup', $.proxy(this.keyup, this)); 

      if (this.eventSupported('keydown')) { 
       this.$element.off('keydown', $.proxy(this.keydown, this)) 
      } 

      this.$menu 
       .off('click', $.proxy(this.click, this)) 
       .off('mouseenter', 'li', $.proxy(this.mouseenter, this)) 
       .off('mouseleave', 'li', $.proxy(this.mouseleave, this)) 
      this.$element.removeData('typeahead'); 
     } 
    };`enter code here`