如何在键入时过滤jquery自动完成数据
到目前为止,我有以下内容
var aCleanData = ['aaa','aab','faa','fff','ffb','fgh','mmm','maa']; $('#my-input').autocomplete({ source:aCleanData, minLength:2 });
目前,如果您键入aa
, aaa,aab,faa,maa
将显示。
我想要做的是当用户键入ff
,显示的数据将是fff,ffb
数据。
基本上,只有键入的内容应该从第一个字符开始匹配。
这应该是递归的。 当用户键入fg
, fff,ffb
fgh
应该fgh
,只有fgh
应该出现。
在此先感谢您的帮助。
更新:
ps看看我的意思:
http://jqueryui.com/demos/autocomplete/#default
键入sc
,您将看到的不仅仅是以sc开头的数据。
只获得以输入值开头的结果的一种可能解决方案是在自己搜索之前检查数组元素:
var aCleanData = ['aaa','aab','faa','fff','ffb','fgh','mmm','maa']; $('#my-input').autocomplete({ source: aCleanData, minLength: 2, search: function(oEvent, oUi) { // get current input value var sValue = $(oEvent.target).val(); // init new search array var aSearch = []; // for each element in the main array ... $(aCleanData).each(function(iIndex, sElement) { // ... if element starts with input value ... if (sElement.substr(0, sValue.length) == sValue) { // ... add element aSearch.push(sElement); } }); // change search array $(this).autocomplete('option', 'source', aSearch); } });
另见我的jsfiddle 。
查看源自动完成后,您有几个选项。 您可以编写自己的pasrer方法,返回所需内容并将其设置为回调源。 这可能是更“正确”的方式。
更快的方法是在包含ui源之后添加以下行:
$.ui.autocomplete.escapeRegex=function(){ return '[^|\s]' + $value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); };
如果你关心它是如何工作的(或者应该工作,我还没有测试过):
原始代码使用2个静态函数扩展了ui.autocomplete:
$.extend( $.ui.autocomplete, { escapeRegex: function( value ) { return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); }, filter: function(array, term) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" ); return $.grep( array, function(value) { return matcher.test( value.label || value.value || value ); }); } });
您需要做的就是更改escapeRegex返回的内容,以便仅搜索单词时的开头。 通过将escapeRegex的值设置为在原始返回前面返回'[^|\s]'
,我们说“查找前面有空格的工作或者是行的开头”
我认为你使用jQuery UI – 自动完成 。 一种搜索类型与您想要的方式不同。 但是这个可能是为了你的需要。