基于javascript实现的自动提示搜索功能

基于javascript实现的自动提示搜索功能
当数据量不大,并且没有与后端对应的功能接口时,一些简单的搜索功能基本上是通过前端实现的,这只是最近才使用的。

设计素描 uff1a
功能描述:

按下键盘后,输入词条中的汉字、拼音字母和汉字的数量。

实现这个想法:

先把汉字输入拼音,然后把汉字、拼音串、数字拼接规则转化成数组,然后每次按键盘后判断输入的值是汉字、拼音或数字,然后按照固定的规则去一个圆形数组,这样你就可以找到相应的词条;

使模式:

外部搜索测试

输入输入/搜索值输入框

我搜索的结果显示了搜索值列表

我搜索条目

新的search_engine(搜索测试内

注意:搜索条目加上两个临时数据,数据名和数据电话,用于存储汉字和数字。

描述:拼音转换使用一个插件,叫jquery.hz2py-min.js,因为这个插件只能转换价值的输入,所以代码中存在一个以上的步骤,首先把价值在一个临时的输入,然后将它转换。

HTML:

复制代码代码如下所示:

一百三十九亿一千四百一十五万七千八百九十五

战士
一百五十一亿一千二百三十五万七千八百九十六

部长
一百三十七亿三千二百四十五万九千九百八十

小偷
一百八十亿一千五百九十四万二千三百六十五

德鲁伊
一百五十三亿一千二百四十八万五千六百九十八

和尚
一百三十八亿一千五百九十六万三千二百五十八

死灵法师
一百三十八亿一千五百九十三万四千二百五十八

圣骑士
CSS:

复制代码代码如下所示:

*填充:0;边距:0;}

列表样式:无;}

体{字体大小:12px;颜色:# 333;}

。搜索测试内{ margin: 100px汽车;padding: 10px;宽度:400px;背景:# e0e0e0;边界半径:10px;}

瓦尔内{ margin-bottom:。搜索:20px;padding: 10px;背景:# FFF;}

。member-list-inner.search-li { padding: 10px;}

。搜索值列表顶部10px;} {保证金:

。搜索值列表里{填充:5px;}

member-list-inner.search-li.phone,

搜索值列表李。电话{浮标:正确;}

。搜索值{宽度:100%;高度:30px;线高度:30px;}

提示{字体重量:粗体;}
JS:

复制代码代码如下所示:

/ / ---------------------------------------------------初始化{ }

功能search_engine(DOM,searchinput,searchresultinner,searchlist){

一个存储数组/拼音+数字+汉字数组

this.searchmemberarray = { };

对象

this.dom = $(,+ DOM);

搜索框

this.searchinput = ,+ searchinput;

搜索结果框

this.searchresultinner = this.dom.find(,+ searchresultinner);

搜索对象列表

this.searchlist = this.dom.find(,+ searchlist);

/转换拼音并存储在数组中

this.transformpinyin();

绑定搜索事件

This.searchActiveEvent();

}

search_engine.prototype = { {

/ / ----------------------------- {成拼音,拼音和汉字和数字存储在数组}

transformpinyin:函数(){

//数据对象的临时存储

$();

var =美元美元(输入拼音,拼音盒);

对于(var i = 0;i < this.searchlist.length;i++){

存储名称,转换为拼音

pinyin.val美元(this.searchlist.eq(我)。Attr(数据));

将汉字转换成拼音

拼音= $ pinyin.topinyin()ToLowerCase(),更换( / / g,);

中文字符

无功cncharacter = this.searchlist.eq(我)。Attr(数据);

数字

VAR数字= this.searchlist.eq(我)。Attr(数据电话);

在数组中

This.searchMemberArray.push(拼音+++ cncharacter ++数字);

}

删除数据对象的临时存储

pinyin.remove美元();

},

{关键词} / / -----------------------------模糊搜索

fuzzysearch:功能(类型,Val){

VaR的;

无功returnarray = { };

拼音

如果(类型=拼音){

s=0;

}

中文字符

如果(类型= cncharacter){

s=1;

}

数字

否则如果(类型=数字){

s=2;

}

对于(var i = 0;i < this.searchmemberarray.length;i++){

包含字符

如果(这。searchmemberarray {我}。分裂({ }。指数)(Val)> = 0){

ReturnArray.push(这个。searchmemberarray {我});

}

}

返回returnarray;

},

{结果} / / -----------------------------输出

postmemberlist:功能(temparray){

html =;

有搜索结果

如果(temparray.length > 0){

HTML + = '的搜索结果(+ temparray.length +);

对于(var i = 0;i < temparray.length;i++){

VaR成像计算机= temparray {我}。分裂();

html;

HTML + = + +成像计算机{ 2 };

HTML + = + +成像计算机{ 1 };

html;

}

}

没有搜索结果

别的{

如果($(这个。searchinput)瓦迩()!){

没有搜索结果…;

其他{ }

This.searchResultInner.html();

}

}

This.searchResultInner.html(HTML);

},

/ / ----------------------------- {事件}搜索

searchactiveevent:函数(){

无功搜索引擎=这;

$(document),(KeyUp

查找临时存储阵列

无功temparray = { };

var = $(this)。瓦迩();

普通法官/拼音

无功pinyinrule = / ^ { a-za-z } + $ /;

规则的法官/汉字

无功cncharacterrule = new RegExp(^ { u4e00 - u9fff } + $

规则整数判断

无功digitalrule = / ^ { - }(D + D +)/;

仅搜索3例

拼音

如果(pinyinrule.test(Val)){

temparray = searchengine.fuzzysearch(拼音

}

中文字符

如果(cncharacterrule.test(Val)){

temparray = searchengine.fuzzysearch(cncharacter

}

数字

如果(digitalrule.test(Val)){

temparray = searchengine.fuzzysearch(数字化

}

别的{

searchengine.searchresultinner.html(没有搜索结果…);

}

searchengine.postmemberlist(temparray);

});

}

};
效果不是很好,合作伙伴可以美化使用他们自己的项目。

tag:自动提示搜索功能电脑软件Javascript

相关内容