关于“搜索”方法

模糊查询

输入关键字或者相关大小写字母实现搜索功能

/****模糊查询****/
$("selector").on("focus", function() {
    var that = $(this);
    //显示列表
    $("selector").show();
    //输入实时查询事件，propertychange是IE的输入监听事件，input是其它浏览器
    $("selector").on("input propertychange", function() {
        $("selector")
            .hide() // 隐藏所有
            .filter(":contains('" + that.val().toLocaleLowerCase() + "')") //小写
            .show(); // 显示已过滤条目
    });
});
/****模糊查询  END****/

实时筛选

通过定时器进行实施筛选功能

var text = "";  
setInterval(function(){  
  text = $('selector').val();//获取文本框输入  
  if($.trim(text) != ""){  
    $("#table tr:not(:first-child)").hide().filter(":contains('"+text+"')").show();  
  }else{  
    $('selector').show();//当删除文本框的内容时，又重新显示表格所有内容  
  }  
},100);

拼音/名字搜索

该方法通过设置搜索项的属性实现
html:

<li pinyin="ly" cityname="临沂">
    <a href="#">临沂 </a>
</li>

js:

function searchCity() {
  var searchCityName = $("selector").val();
  if(searchCityName == "") {
    $("selector").show();
  } else {
    $("selector").each(function() {
      var pinyin = $(this).attr("pinyin"); // 通过设置搜索项属性确定
      var cityName = $(this).attr("cityName");
      if(pinyin.indexOf(searchCityName) != -1 ||
         cityName.indexOf(searchCityName) != -1) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  }
}
$('selector').bind('input propertychange', function() {
  searchCity();
});

以上都是简单的页面内搜索，如果涉及到服务器端搜索，可以使用 ajax 实现服务器端搜索功能。

---

下边是一个相对复杂的搜索框的制作。（针对信息量不大的模糊查询）
html部分：

<div class="wyInput" id="myInput">
    <!-- 搜索框部分 -->
    <div class="wyinput-group">
        <input type="text" placeholder="请输入关键字">
        <a href="#" class="wyinput-btn">搜 索</a>
    </div>
    <!-- 搜索结果下拉框部分 -->
    <div class="wyinput-drop">

    </div>
</div>

js部分：

$(function () {
    //许传入类似案例的json对象，实际中可以使后台获取的数据的填充，类似于显示数据库中有无该数据一样
    $("#myInput").wy_inselect([{name:'紫色'},{name:'yellow'},{name:'pink'},{name:'whrite'}]); 
});

封装的函数：

(function($){
    $.fn.extend({ // 为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)。
        "wy_inselect":function(options){
            if(!isValid(options)) return this; // 判断当前搜索数组是否合规
            var $Id = $(this); // 代理当前 this ，当前 this 指的是 id 为 myInput 的dom节点
          console.log($Id) //n.fn.init [div#myInput.wyInput, selector: "#myInput", context: document]
            var last;
            // 重置当前下拉框并隐藏
            $Id.find(".wyinput-drop").css("width",$(".wyinput-group input").outerWidth()+"px").hide();
            // 监听当前 input 的键盘松开事件
            $Id.find(".wyinput-group input").keyup(function(event){
                last = event.timeStamp; // timeStamp 事件属性可返回一个时间戳。如：9298.01999987103
                setTimeout(function(){    //设时延迟0.5s执行
                    if(last-event.timeStamp==0)
                    //如果时间差为0（也就是你停止输入0.5s之内都没有其它的keyup事件发生）
                    {
                        var arr= searchIndex($Id,options); // 搜索当前数组
                        loadDrop($Id,arr); // 设置当前下拉框
                    }
                },500);

            })
            // 类似事件委托
            $Id.find(".wyinput-drop").delegate(".drop-line a","click",function(){
                // 当点击搜索结果项时，将当前的点击项填入到搜索框中
                var html=$(this).html(); // 当前的 this 指的是被点击项
                console.log(html)
                console.log($(this)) // n.fn.init [a, context: a]
                // 重置结果下拉框，结果填入输入框，并隐藏下拉框
                $(this).parents(".wyinput-drop").siblings(".wyinput-group").find("input").val(html);
                $Id.find(".wyinput-drop").hide()
            })

        }
    })

    //监测参数是否合法
    function isValid(options){
        return !options || (options　&& typeof options === "object")?true:false;
    }

    //模糊查询
    function searchIndex($Id,options){ // $Id 为当前的整个搜索框
        var $input = $Id.find(".wyinput-group input");
        var keywords = $input.val();
        var arr=[];
        if(keywords==""||keywords==" "){
            return arr;
        }
        $.each(options,function(idx,obj){ // 数组的每一项都是对象
            if(obj.name.indexOf(keywords)>=0){
                arr.push({name:obj.name});
            }
        })
        console.log(arr);
        return arr;
    }

    //加载下拉框
    function loadDrop($Id,arr){
        var html = "";
        if(arr.length == 0){
            $Id.find(".wyinput-drop").html("").hide();
            return;
        }
        $.each(arr,function(idx,obj){
            html+='<p class="drop-line">' + '<a href="#">'+obj.name+'</a></p>';
        })
        $Id.find(".wyinput-drop").html(html).show();
    }
})(window.jQuery)

涉及到的方法：

• timeStamp 事件属性可返回一个时间戳。指示发生事件的日期和时间（从 epoch 开始的毫秒数）。
• $.fn.extend() 函数为 jQuery 扩展一个或多个实例属性和方法(主要用于扩展方法)。参考
• $.each() 是对数组，json 和 dom 结构等的遍历。$.each(arr1,function(i,val){ }) 两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值。
• find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
• delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。类似于事件委托