当前位置:首页 > 技术博客 > JQuery > jQuery仿百度搜索引擎

jQuery仿百度搜索引擎

4年前 (2021-08-14)JQuery906

静态搜索引擎,内置ajax动态查询


默认参数:

{
    width: "200px", //输入框的宽度 
    height: "35px", //输入框的高度
    inpBorderSize: "2px", //输入框下边框的大小
    inpBorderColor: "#EEEEEE", //输入框下边框的颜色
    borderSize: "2px", //外边框的大小 
    borderColor: "#4e71f2", //外边框的颜色 
    placeholder: "搜索", //输入框提示 
    borderRadius: "10px", //圆角大小 
    static: true, //是否静态使用 是 
    paramData: {} //动态使用参数 配合static一起使用 
}

初始化: 提供输入框id( 必须是id)

$("#search").initSearch({
    placeholder: "请输入中国"
});

动态使用:

基于ajax paramData参数介绍 

{
    param: {
        url: "www.baidu.com",
        type: "POST",
        param: {
            page: 1
        }
    }, //请求路径,请求类型,请求参数           
    callback: val => {
        //获取输入框的值回调        
    },
    succeedCallBack: res => {
        //请求成功后的回调       
    },
    errCallBack: (res, errInfo) => {
        //请求失败后的回调        
    }
}


注:获取取输入框的值$("#search").val();


下载链接: https://pan.baidu.com/s/1dwoNU563h4A4JhfRyTwIdA  

提取码: 

ekwu


版权声明:本文由 LzxBlog 发布,如需转载请注明出处。

本文链接:https://cdn.liuzhixi.cn/html/143.html

标签: jQuery搜索

相关文章

jq里面remove()和empty()的区别

jq里面remove()和empty()的区别

remove() - 删除被选元素(及其子元素)empty() - 从被选元素中删除子元素remove() 方法也可接受一个参数,允许对被删元素进行过滤。该参数...

JQuery动态添加元素方法

JQuery动态添加元素方法

JQuery动态添加元素方法append()在父级最后追加一个子元素 appendTo()在父级最后追加一个子元素 prepend()在父级...

jQuery动态数据流程步骤条特效

jQuery动态数据流程步骤条特效

jQuery动态数据流程步骤条特效,事先设置好需要走的流程步骤,然后根据状态进行判断走到哪一步,审批意见是什么,支持动态数据配置。<html>&nb...

jQuery html5背景视频插件

jQuery html5背景视频插件

vidbacking是一款响应式的,跨平台的html5视频背景插件。该视频背景插件允许你在页面中的某个div后整个页面中使用HTML5视频作为背景使用方法在页面...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。