这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了基于 javascript 实现的搜索时自动提示功能,非常实用,推荐给需要的小伙伴参考下。
当在数据量不是很大,而且没有后端对应的功能接口的时候,一些简单的搜索功能基本上是前端去实现的,正好最近用到,写了一个,贴出来和大家分享:
效果图:
功能描述:
按下键盘后及时搜索条目中的汉字,汉字对应的拼音和号码;
实现思路:
先将条目中的汉字转换成拼音,然后将汉字,拼音,数字拼接成规律的字符串,放入数组,然后每次按下键盘后判断 input 中的值是汉字,拼音,还是数字,然后按固定的规律去循环数组,这样就能找到对应的条目了;
启用方式:
// search-test-inner ---> 最外层 div // search-value ---> input 输入框 // search-value-list ---> 搜索结果显示 div // search-li ---> 搜索条目 new SEARCH_ENGINE("search-test-inner","search-value","search-value-list","search-li"); 注意:搜索条目加上两个临时数据,data-name 和 data-phone ,用来存储汉字和数字。
说明:拼音的转换用到了一个叫 jQuery.Hz2Py-min.js 的插件,由于这个插件只能转换 input 里的值,所以代码里多了一个步骤,先将值放入一个临时的 input ,再转换。
html:
- <div class="search-test-inner">
- <div class="search-val-inner">
- <input type="text" class="search-value" placeholder="搜索">
- <ul class="search-value-list">
- </ul>
- </div>
- <div class="member-list-inner">
- <ul>
- <li class="search-li" data-name="战士" data-phone="13914157895">
- <span class="phone">
- 13914157895
- </span>
- <span class="name">
- 战士
- </span>
- </li>
- <li class="search-li" data-name="牧师" data-phone="15112357896">
- <span class="phone">
- 15112357896
- </span>
- <span class="name">
- 牧师
- </span>
- </li>
- <li class="search-li" data-name="盗贼" data-phone="13732459980">
- <span class="phone">
- 13732459980
- </span>
- <span class="name">
- 盗贼
- </span>
- </li>
- <li class="search-li" data-name="德鲁伊" data-phone="18015942365">
- <span class="phone">
- 18015942365
- </span>
- <span class="name">
- 德鲁伊
- </span>
- </li>
- <li class="search-li" data-name="武僧" data-phone="15312485698">
- <span class="phone">
- 15312485698
- </span>
- <span class="name">
- 武僧
- </span>
- </li>
- <li class="search-li" data-name="死灵法师" data-phone="13815963258">
- <span class="phone">
- 13815963258
- </span>
- <span class="name">
- 死灵法师
- </span>
- </li>
- <li class="search-li" data-name="圣骑士" data-phone="13815934258">
- <span class="phone">
- 13815934258
- </span>
- <span class="name">
- 圣骑士
- </span>
- </li>
- </ul>
- </div>
- </div>
CSS:
- * {
- padding: 0;
- margin: 0;
- }
- ol,
- ul {
- list - style: none;
- }
- body {
- font - size: 12px;
- color: #333;
- }.search - test - inner {
- margin: 100px auto;
- padding: 10px;
- width: 400px;
- background: #e0e0e0;
- border - radius: 10px;
- box - shadow: 1px 2px 6px#444;
- }.search - val - inner {
- margin - bottom: 20px;
- padding: 10px;
- background: #fff;
- }.member - list - inner.search - li {
- padding: 10px;
- }.search - value - list {
- margin - top: 10px;
- }.search - value - list li {
- padding: 5px;
- }.member - list - inner.search - li.phone,
- .search - value - list li.phone {
- float: right;
- }.search - value {
- width: 100 % ;
- height: 30px;
- line - height: 30px;
- }.tips {
- font - weight: bold;
- }
JS:
- //---------------------------------------------------【初始化】
- function 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 : function(){
- //临时存放数据对象
- $("body").append('<input type="text" class="hidden pingying-box">');
- var $pinyin = $("input.pingying-box");
- for(var i=0;i<this.searchList.length;i++){
- //存放名字,转换成拼音
- $pinyin.val(this.searchList.eq(i).attr("data-name"));
- //汉字转换成拼音
- var pinyin = $pinyin.toPinyin().toLowerCase().replace(/s/g,"");
- //汉字
- var cnCharacter = this.searchList.eq(i).attr("data-name");
- //数字
- var digital = this.searchList.eq(i).attr("data-phone");
- //存入数组
- this.searchMemberArray.push(pinyin + "&" + cnCharacter + "&" + digital);
- }
- //删除临时存放数据对象
- $pinyin.remove();
- },
- //-----------------------------【模糊搜索关键字】
- fuzzySearch : function(type,val){
- var s;
- var returnArray = [];
- //拼音
- if(type === "pinyin"){
- s = 0;
- }
- //汉字
- else if(type === "cnCharacter"){
- s = 1;
- }
- //数字
- else if(type === "digital"){
- s = 2;
- }
- for(var i=0;i<this.searchMemberArray.length;i++){
- //包含字符
- if(this.searchMemberArray[i].split("&")[s].indexOf(val) >= 0){
- returnArray.push(this.searchMemberArray[i]);
- }
- }
- return returnArray;
- },
- //-----------------------------【输出搜索结果】
- postMemberList : function(tempArray){
- var html = '';
- //有搜索结果
- if(tempArray.length > 0){
- html += '<li class="tips">搜索结果(' + tempArray.length + ')</li>';
- for(var i=0;i<tempArray.length;i++){
- var sArray = tempArray[i].split("&");
- html += '<li>';
- html += '<span class="phone">' + sArray[2] + '</span>';
- html += '<span class="name">' + sArray[1] + '</span>';
- html += '</li>';
- }
- }
- //无搜索结果
- else{
- if($(this.searchInput).val() != ""){
- html += '<li class="tips">无搜索结果……</li>';
- }else{
- this.searchResultInner.html("");
- }
- }
- this.searchResultInner.html(html);
- },
- //-----------------------------【绑定搜索事件】
- searchActiveEvent : function(){
- var searchEngine = this;
- $(document).on("keyup",this.searchInput,function(){
- //临时存放找到的数组
- var tempArray = [];
- var val = $(this).val();
- //判断拼音的正则
- var pinYinRule = /^[A-Za-z]+$/;
- //判断汉字的正则
- var cnCharacterRule = new RegExp("^[\u4E00-\u9FFF]+$","g");
- //判断整数的正则
- var digitalRule = /^[-+]?d+(.d+)?$/;
- //只搜索3种情况
- //拼音
- if(pinYinRule.test(val)){
- tempArray = searchEngine.fuzzySearch("pinyin",val);
- }
- //汉字
- else if(cnCharacterRule.test(val)){
- tempArray = searchEngine.fuzzySearch("cnCharacter",val);
- }
- //数字
- else if(digitalRule.test(val)){
- tempArray = searchEngine.fuzzySearch("digital",val);
- }
- else{
- searchEngine.searchResultInner.html('<li class="tips">无搜索结果……</li>');
- }
- searchEngine.postMemberList(tempArray);
- });
- }
- };
效果是不是非常棒呢,小伙伴们美化下就可以用到自己项目中了
来源: http://www.phperz.com/article/17/0422/273695.html