我在我的项目中使用了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 :(得分：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`