Jquery实现input框搜索功能

该博客主要讲述使用Jquery实现input框搜索功能,在信息技术领域,这属于前端开发中交互功能的实现,能提升用户在网页上的搜索体验。
$(function () {

    $(document).keydown(function(event){
        //回车事件
        if(event.keyCode==13){
            var is = $(".scroll-nav").css('display');
            if(is == 'none'){
                $("#search_button").click();
            }else {
                $("#selectKeyButton").click();
            }

        }
    });
    //首页搜索按钮点击事件
    $("#search_button").click(function () {
        var text = $("#search").val();
        if(authText(text)){}else{return false;}
        if(window.location.href.indexOf("video") >= 0 ) {
            UpdateUrlParam('','text',text);
        }else {
            UpdateUrlParam('/video','text',text);
        }

    })

    //顶部首页搜索按钮点击事件
    $("#selectKeyButton").click(function () {
        var text = $("#selectKey").val();
         if(authText(text)){}else{return false;}
        if(window.location.href.indexOf("video") >= 0 ) {
            UpdateUrlParam('','text',text);
        }else {
            UpdateUrlParam('/video','text',text);
        }
    })

    function authText(text){
        if(text.length > 10){
            alert('字符长度过长');
            return false;
        }
        var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~!@#¥……&*()——|{}【】‘;:”“'。,、?%]");
        var result = text.match(pattern);
        if (result){
            alert('搜索内容格式不正确!');
            return false;
        }
        return true;
    }

    //搜索记录点击事件
    $(".record").click(function () {
        var text = $(this).text();
        if(window.location.href.indexOf("video") >= 0){
            UpdateUrlParam('','text',text);
        }else{
            UpdateUrlParam('/video','text',text);
        }

    })

    //搜索框获取焦点事件
    $("#search").focus(function(ev){
        var text = $(this).val();
        //console.log(1)
        if(text == ''){
            getDefaultKey();
        }else{
            searchConditions(text);
        }
    });

    //顶部搜索框获取焦点事件
    $("#selectKey").focus(function(){
        var text = $(this).val();
        console.log(1)
        if(text == ''){
            getDefaultKey(type=2);
        }else{
            searchConditions(text,type=2);
        }
    });

    //input 失去焦点事件
    $("#search").blur(function(){
        var text = $(this).val();
        setTimeout(function(){
            if(text == ''){
                $("#search_content li").remove();
            }
            $(".search_content").removeClass('search-adviceblock');
        },100)
    });

    // 顶部input 失去焦点事件
    $("#selectKey").blur(function(){
        var text = $(this).val();
        setTimeout(function(){
            if(text == ''){
                $("#ul_show li").remove();
            }
            $(".is_show").removeClass('search-adviceblock');
        },100)
    });

    //搜索框点击事件
    $("#search").click(function(){
        var text = $(this).val();
        if(text != ''){
            $(".search_content").css("display","block");
            $(".search_content").addClass('search-adviceblock');
        }
    })

    //顶部搜索框点击事件
    $("#selectKey").click(function(){
        var text = $(this).val();
        if(text != ''){
            $(".is_show").css("display","block");
            $(".is_show").addClass('search-adviceblock');
        }
    })

    //搜索框值改变事件
    var flag = true;
    $('#search').on('compositionstart',function(){
        flag = false;
    })
    $('#search').on('compositionend',function(){
        flag = true;
    })
    $('#search').on('input',function(){
        var _this = this;
        setTimeout(function(){
            if(flag){
                var text = $(_this).val();
                if(text == ''){
                    getDefaultKey();
                }else{
                    searchConditions(text);
                }
            }
        },0)
    })

    //顶部搜索框值改变事件
    var flag = true;
    $('#selectKey').on('compositionstart',function(){
        flag = false;
    })
    $('#selectKey').on('compositionend',function(){
        flag = true;
    })
    $('#selectKey').on('input',function(){
        var _this = this;
        setTimeout(function(){
            if(flag){
                var text = $(_this).val();
                if(text == ''){
                    getDefaultKey(type = 2);
                }else{
                    searchConditions(text,type = 2);
                }
            }
        },0)
    })

    //获取默认关键词
    function getDefaultKey(type = 1){
        $.ajax({
            url:'search',
            type:'post',
            dataType:'json',
            success : function (data){
                //$(".search_content").css("display","block");
                if(type == 2){
                    $(".is_show").addClass('search-adviceblock');
                }else{
                    $(".search_content").addClass('search-adviceblock');
                }
                //console.log(data);
                if(data.status == 200) {
                    if(type == 2){
                        $("#ul_show li").remove();
                        $.each(data.data, function(i, item){
                            $("#ul_show").append('<li class="search-advice-word"><a href="'+item.url+'" class="block ">'+item.title+'</a> </li>');
                        })
                    }else{
                        $("#search_content li").remove();
                        $.each(data.data, function(i, item){
                            $("#search_content").append('<li class="search-advice-word"><a href="'+item.url+'" class="block ">'+item.title+'</a> </li>');
                        })
                    }
                } else {
                    if(type == 2){
                        $(".is_show").css("display","none");
                    }else{
                        $(".search_content").css("display","none");
                    }
                }
            }
        })
    }

    //根据input输如值获取关键词
    function searchConditions(text,type = 1) {
        if(type == 1){
            $(".search_content").css("display","block");
        }else{
            $(".is_show").css("display","block");
        }

        $.ajax({
            url:'query',
            type:'post',
            data:{text:text},
            dataType:'json',
            success : function (data){
                //console.log(data);
                //alert(data.status)
                if(data.status == 200) {
                    if(type == 1){
                        $("#search_content li").remove();
                        $.each(data.data, function(i, item){
                            $("#search_content").append('<li class="search-advice-word"><a href="'+item.url+'" class="block ">'+item.title+'</a> </li>');
                        })
                    }else{
                        $("#ul_show li").remove();
                        $.each(data.data, function(i, item){
                            $("#ul_show").append('<li class="search-advice-word"><a href="'+item.url+'" class="block ">'+item.title+'</a> </li>');
                        })
                    }
                }else{
                    if(type == 1){
                        $("#search_content li").remove();
                    }else{
                        $("#ul_show li").remove();
                    }


                }
            }
        })
    }




})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值