jQuery+ajax实现搜索下拉框

最新推荐文章于 2021-08-05 14:10:20 发布
最新推荐文章于 2021-08-05 14:10:20 发布
阅读量253 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/CaseyWei/p/9498621.html
版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #search_result{
            width:302px;
            position:absolute;
            left:618px;
            top:180px;
            z-index:1;
            overflow:hidden;
            background:#dcf6f8;
            border:#c5dadb 1px solid;
            border-top:none;
        }
        .line{
            font-size:12px;
            color:#000;
            background:#aed34f;
            width:302px;
            padding:2px;
        }
        .hover{
            background:#007ab8;
            color:#fff;
        }
    </style>
</head>
<body>
<script>
    $(document).ready(function(){
        $('#search').keyup(function(){
            $.ajax{
                type:'GET',
                url:'include/ajax_search.php',//处理页面的url地址
                data:'txt_search='+escape($('#search').val()),//要传递参数
                success:function(data){
                    if(data!=''){
                        var ss;
                        ss=data.split("@");
                        var layer;
                        layer="<table>";
                        for(var i=0;i<ss.length-1;i++){
                            layer+="<tr><td class='line'>"+ss[i]+"</td></tr>";
                        }
                        layer+="</table>"
                        $('#search_result').empty();
                        $('#search_result').append(layer);
                        $('.line:first').addClass('hover');
                        $('#search_result').css('display','');
                        $('.line').hover(function(){
                            $('.line').removeClass('hover');
                            $(this).addClass('hover');
                        },function(){
                            $(this).removeClass('hover');
                        });
                        $('.line').click(function(){
                            $('#search').val($(this).text());
                        })
                    }else{
                        $('#search_result').empty();
                        $('#search_result').css('display','none');
                    }

                },
                error(function() {
                    alert('O No~~~~');
                });
            }esle if(keyCode==38){
                $('#aa tr.hover').prev().addClass('hover');
                $('#aa tr.hover').next().removeClass('hover');
                $('#search').val($('#aa tr.hover').text());
            }else if(keyCode==40){
                $('#aa tr.hover').next().addClass('hover');
                $('#aa tr.hover').prev().removeClass('hover');
                $('#search').val($('#aa tr.hover').text());
            }
        });
    });
    $(document).ready(function(){
        $().click(function(){
            $('#search_result').empty();
            $('#search_result').css('display','none');
        });
    });
</script>
    
</body>
</html>

转载于:https://www.cnblogs.com/CaseyWei/p/9498621.html

Clotho2012
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现带搜索功能的下拉框
05-02
jQuery searchableSelect实现带搜索功能的下拉框
使用Jquery实现带有搜索框的下拉框
10-23
使用Jquery实现带有搜索框的下拉框，里面有已经实现的实例。其中的异步加载数据需要自己手动填写或者做一些临时数据也可以。
jquery带搜索的下拉框(可模糊搜索)
06-28
看其他csdn博主收分太高，所以将此资源上传，希望有需要的朋友可以下载。
jquery搜索框 下拉框 上下键
liux6687的博客
11-08 1171
$(function() {             // 获取本地历史记录             var arr = JSON.parse(localStorage.getItem("HistoryList"));             // 调用为历史记录赋值的方法             getLocalStorage($(".HistoryList"),arr)            ...
jquery+ajax实现省市区三级联动效果简单示例
10-20
主要介绍了jquery+ajax实现省市区三级联动效果,结合实例形式分析了jQuery结合ajax实现省市区三级联动功能的具体步骤与相关操作技巧,需要的朋友可以参考下
jQuery+ajax实现动态添加表格tr td功能示例
12-11
本文实例讲述了jQuery+ajax实现动态添加表格tr td功能。分享给大家供大家参考，具体如下： 功能：ajax获取后台返回数据给table动态添加tr/td html部分： <tbody></tbody> ajax部分： var year = $('#year').val...
jQuery+ajax实现三级级联
11-23
该实例为本人项目中使用的模块代码，经过专业测试人员测试，兼容所有主流浏览器，如有不解之处请联系本人
ajax实现动态下拉框示例
08-31
本篇文章主要介绍了ajax实现动态下拉框示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
10-18
下面小编就为大家分享一篇使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Ajax实现百度搜索框
12-23
Ajax实现的百度搜索框，主要是javascript，能模糊搜索，
Ajax搜索框实现代码
12-25
Ajax搜索框实现代码，自带数据库的，最好在VS2008运行
ajax+jquery实现类似百度搜索提示框
04-04
NULL 博文链接：https://dsmart-30buy.iteye.com/blog/1485351
ajax实现简单搜索功能(jQuery+aspx)
06-09
初学jQuery的时候写的，所以有些瑕疵就不要拍砖啦，只在IEtester上测试过，IE6+没有问题，当初觉得百度的搜索功能蛮好玩的，才写的。
jQuery+Ajax搜索框输入文字自动补全代码
05-05
jQuery+Ajax搜索框输入文字自动补全代码,一款利用Ajax实现的仿百度搜索自动补全下拉框显示相关列表选项效果。
JQuery实现下拉框搜索用户名
sjw1039115768的博客
05-23 1505
近期在项目中有用到搜索用户的功能，于是自己使用JQuery写了一个在输入框填写名字然后在下拉框中出现相对应的名字一、思路在取数据方面刚开始是有两个方案，第一个方案是在页面load的时候直接请求API将所有的用户名信息都取出来然后保存在数组中，然后在搜索时从中取数据。第二个方案是在搜索时根据输入框的信息实时调用API取数据。由于考虑到如果用户量很多的话在load页面请求数据势必会造成一定的影响，所以...
案例:搜索框内容自动提示(ajax)
weixin_46379498的博客
05-24 896
案例:搜索框内容自动提示(ajax) 步骤: 获取搜索框并为其添加用户输入事件 获取用户输入的关键字 向服务器端发送请求并携带关键字作为请求参数 将响应数据显示在搜索框底部 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜索框输入文字自动提示</title> <link rel="stylesheet" hre
ajax下拉搜索框,jQuery的带搜索过滤ajax加载下拉框插件
weixin_35891787的博客
08-05 301
jQuery的带搜索过滤ajax加载下拉框插件这是一款支持选项搜索过滤和Ajax远程加载的select下拉选择框jQuery插件。js代码/* This parser won't respect "---" selection */function dataParserA(data, selected) {retval = [ { val: "-1" , text: "---" } ];data....
ajax下拉搜索框,jQuery带搜索过滤ajax加载下拉框插件
weixin_29790897的博客
08-05 147
js代码/* This parser won't respect "---" selection */function dataParserA(data, selected) {retval = [ { val: "-1" , text: "---" } ];data.forEach(function(v){if(selected == "-1" && v.val == 3)v.s...
jquery+ajax+xml 三级 下拉菜单
最新发布
05-25
以下是一个基于 jQuery 和 Ajax 的三级下拉菜单代码示例，使用 XML 数据源： HTML 代码： ```html 省份： <select id="province"></select> 城市： <select id="city"></select> 区县： <select id="district">...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值