jQuery实现的快速查找

jQuery实现的快速查找就是一个列表中查找和你输入的文字相匹配的项,高亮并前置表示;

如图:

2009-06-04_002402

jQuery代码:

[code=”javascript”]

$(function(){
?//键盘按键弹起时执行
?$(‘#index’).keyup(function(){
??var index = $.trim($(‘#index’).val().toString());//去掉两头空格
??if(index == ”){
???$(‘li’).removeClass(‘on’);return false;
??}
??var parent = $(‘ul’);
??$(‘li’).removeClass(‘on’);
??//选择包含文本框值的所有加上focus类样式,并把它(们)移到ul的最前面
??$(“li:contains(‘” + index + “‘)”).prependTo(parent).addClass(‘on’);
?});
});

[/code]

完整?DEMO:https://www.html.cn/demo/jQuery/quickSearch/quickSearch.html

赞(0) 打赏
未经允许不得转载:WEB前端开发 » jQuery实现的快速查找

评论 3

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    可以支持拼音搜索吗?

    883572年前 (2017-06-20)回复
    • 首先把中文转化为拼音,作为属性,检查属性是否包含拼音就可以了。不过后端转化出来的拼音可能会存在多音字什么的,具体实现时候可能会存在瑕疵

      2年前 (2017-06-20)回复
      • 好的 谢谢啦

        883572年前 (2017-06-21)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏