关键词搜索框的单击事件代码(jQuery)

1.功能介绍

在商城的页头中有搜索框，用户可在搜索框中输入关键词(一个或多个)查询相关商品，点击查询图片或按回车键跳转到商品列表页面。

2.代码实现

实现思路：

• 在用户点击查询图片或点击回车键时，添加单击事件，跳转到关键词搜索的商品列表页面；
• 同时将用户输入的关键词保留在搜索框中。

搜索查询功能的数据库代码，php处理数据代码 以及 前端加载商品页面代码 已经实现。

jQuery代码

$(()=>{ 
//在DOM内容加载后自动执行
    $(".navbar").load("navbar.html",function(){
    //加载页头

        //将查询字符串跳转到商品列表页面，再查询
        $("[data-trigger=search]").click(function(){
        //获取搜索图标的选择器，添加单击事件
            var $input=$("#txtSearch"); 
            //查找到搜索框
            if($input.val().trim().length>0){  
            //获得搜索框的内容，关键词不为空
            //$.trim() 函数用于去除字符串两端的空白字符。
                location="things.html?kw="+$input.val().trim();
                //跳转到关键词搜索的商品列表页面
            };
        });

        //点击回车可搜索,支持回车查询
        $("#txtSearch").keyup(function(e){
        //添加键盘按下事件，事件信息都保存在e里
            console.log(e.keyCode); 
            //查看回车的键盘号，13
            if(e.keyCode==13)
            //如果用户按下回车键
                $("[data-trigger=search]").click();
                //模拟触发，不用再写一遍
        });

        //将用户输入的关键词保留在搜索框中

        var search=location.search;
        //获取location中的查询字符串
        //search属性是一个可读可写的字符串可设置或返回当前URL的查询部分(问号?之后的部分)

        if(search.indexOf("kw")!=-1)
        //如果search中包含"kw="变量，即有关键词搜索
            $("#txtSearch").val(decodeURI(search.split("=")[1]));
            //则将kw变量的值(即用户输入的关键词)，保存到文本框中
            //decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码
            //url标准规定不能出现多字节字符(汉字)、保留字(:等)
    });
});

更多内容，欢迎关注微信公众号“让知识成为资产”。