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

jQuery仿百度搜索引擎

4年前 (2021-08-14)JQuery865

静态搜索引擎,内置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动态添加元素方法append()在父级最后追加一个子元素 appendTo()在父级最后追加一个子元素 prepend()在父级...

jQ获取服务端时间

jQ获取服务端时间

当我们有倒计时的需求时,不可能以客户端的时间为准,如果客户端时间不予网络时间一致,整个项目就完蛋了,所以我们需要获取服务端时间我们获取服务器时间是发起ajax请...

基于jQuery的拖拽效果

基于jQuery的拖拽效果

描述:基于jQuery实现的拖拽插件,简单好用<head>     <meta chars...

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

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

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

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

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

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

发表评论

访客

看不清,换一张

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