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

jQuery仿百度搜索引擎

admin2年前 (2021-08-14)JQuery602

静态搜索引擎,内置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://www.liuzhixi.cn/html/143.html

标签: jQuery搜索

相关文章

JQuery生成二维码

JQuery生成二维码

jquery.qrcode.min.js 是一款基于 jquery 方便生成二维码图片的小插件。该插件兼容主流浏览器:IE9~11, Chrome, Firef...

10种jQuery轮播图特效整合

10种jQuery轮播图特效整合

下载链接: https://pan.baidu.com/s/1YQDM4yDcTgnfnetL07MbgA   提取码: pmn1...

jQuery响应式工作室类网站模板

jQuery响应式工作室类网站模板

简洁创意的jQuery响应式工作室类网站模板下载链接:https://pan.baidu.com/s/17qCoDvqTAt98mygA4b4jCQ ...

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

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

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

jQuery html5背景视频插件

jQuery html5背景视频插件

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

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。
X 要酷!乐于助人,网络是一个神奇的地方,玩得愉快,击掌