jquery插件写百度搜索栏特效模糊查询

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        table
        {
             display:none;
            }
    table tr td
    {
        border:1px solid orange;
       
        }
        table tr td:hover
        {
            background-color:Yellow;
            }
    </style>
    <link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script src="jquery.autocomplete.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var array = ['asp.net', 'asp.net mvc', 'wcf', 'wpf', 'win8', 'phone', '李硕', '李昂', '李宁', '郑寒松'];
            /*autocomplete函数
            1)获取txtKey中用户输入的值(用户每输入一个字符,都会获取一次)
            2)将获取的值和array集合中的元素进行比较,找出匹配的元素,并且显示出来
            3)会将用户选择的项添加到txtKey中。
            */
            $('#txtKey').autocomplete(array).result(function (event, data) {
                //result函数:对用户选择的结果进行操作。data参数表示用户选择的项
                //result当回车或单击一个按钮时能返回一个值
                //第一个函数even当参数使用,不起作用
                //第二个函数data就是当前选中text中的选中值

                //当点击百度td时触发
                $('td:eq(0)').click(function () {
                    window.location.href = 'http://www.baidu.com/s?wd=' + data + '&rsv_bp=0&ch=&tn=baidu&bar=&rsv_spt=3&ie=utf-8&rsv_sug3=6&rsv_sug=0&rsv_sug1=3&rsv_sug4=229&inputT=1458';
                    alert('ok');
                })
                $('td:eq(1)').click(function () {
                    window.location.href = 'http://www.google.com.hk/search?engine=google_web&q='+data+'&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla%3Azh-CN%3Aofficial&client=firefox-a';
                    alert('ok');
                })
                $('#txt1').val(data);
            });

 

            $('#btn1').click(function () {
            })

            $('#txtKey').focus(function () {
                $('table').css('display', 'block');
            })

        })
    </script>
</head>
<body>
<input id="txtKey" type="text" />
<table><tr><td>百度</td><td>谷歌</td></tr></table>
<input id="btn1" type="button" value="百度一下" />
<input id="txt1" type="text" />
</body>
</html>

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值