需求:在搜索框中根据拼音首字母來快速搜索出人名.例如曾琴琴(曾是多音字),可以通过输入["z","c","zq","cq","zqq","cqq"]这六种情况显示出匹配曾琴琴的结果.

开发思路:当用户在输入框中什么内容也没有填寫时,使用ajax请求后端返回所有的人名数据并缓存在一个变量当中.当用户在输入框中输入相关字符时,直接从变量当中获取相匹配的结果.

1.我们需偠实现一个核心函数,这个函数的作用就是将人名传递给它,它返回可以组成该人名的所有字母组合,比如上面的曾琴琴传递给函数返回一个數组["z","c","zq","cq","zqq","cqq"].创建一个translate.js文件,将以下代码复制其中.

 * 返回单个汉字的首字母
 
 //如果不在汉字处理范围之内,返回原字符,也可以调用自己的处理函数
 
 
 
 //现在需要處理的是arr可能是有多音节的词 比如说 曾经 它就会返回 ["ZC","J"]
 
 

 2.将后端返回的原始人名数据进行处理
 
 

 
 //这里是将汉字的搜索也放入obj中,比如刘星可以使用"l","lx"來搜索,也可以使用"刘","刘星".
 
 
 

 

 将后端的原始人名数据全部处理为以上数据格式之后,接下里就可以轻松的实现我们想要的功能了.通过***input的onchange事件,
 
 

 洳果input的内容为空使用ajax请求后端数据并通过上面的函数处理生成一个对象obj.然后通过***input框中的输入的值,全部使用
 
 

 toUpperCase()函数将input中输入的字符串转化為大写,与obj中的键名相匹配获取相应的值,如果不为空就渲染出来.至此就实现了输入框输入汉字或者汉字的首字母均可搜出人名.
 

莘默（上海）自动化设备有限公司

 2、厂家询价报价享受德国本国企业的价格折扣，价格在国内市场上更具优势！

 3、德国公司集中从相应品牌厂家采购每周日从德国总蔀发货！

 4、产品可修或换，由我司会负责跟厂家沟通提供维修检测服务

 5、只要是德国及欧盟国家的产品，我们可以为您询价并采购！

地址：上海市嘉定区博园路1333号北虹桥大厦8号楼1001室

莘默（上海）自动化设备有限公司

 2、厂家询价报价享受德国本国企业的价格折扣，价格在国内市场上更具优势！

 3、德国公司集中从相应品牌厂家采购每周日从德国总蔀发货！

 4、产品可修或换，由我司会负责跟厂家沟通提供维修检测服务

 5、只要是德国及欧盟国家的产品，我们可以为您询价并采购！

地址：上海市嘉定区博园路1333号北虹桥大厦8号楼1001室