正文

仿百度自动补全搜索框效果(*附有源码下载)

QW-lzm  QW-lzm  2022-10-02  478

关键词：

　页面效果及代码，（源码在下面的下载链接）

<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/semantic.css">
    <script type="text/javascript" src="jquery-autocomplete/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery-autocomplete/jquery.autocomplete.js"></script>
    <link rel="stylesheet" href="jquery-autocomplete/jquery.autocomplete.css">

    <script type="text/javascript">
        var go = [
            "Baidu", "python", "java", "javascript", "Taobao", "Tom", "Yahoo","Alipay","Asp","Apple",
            "Lisp","PHP","Python"
        ];
        $().ready(function () {
            $("#go").autocomplete(go);
        });
    </script>

</head>
<body>
    <br><br><br><br><br><br><br><br><br><br>
    <div class="ui vertically padded page grid">
        <div class=" column">
            <form action="" method="post">
                <div class="ui fluid action input">
                    <input type="text" placeholder="Search" name="" id="go">
                    <div id="content"></div>
                    <button class="ui blue button" type="submit">自动补全</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

jquery.autocomplete.css

.ac_results {
    padding: 0px;
    border: 1px solid WindowFrame;
    background-color: Window;
    overflow: hidden;
    z-index: 99999;
}
/* www.bvbsoft.com  */
.ac_results ul {
    width: 100%;
    list-style-position: outside;
    list-style: none;
    padding: 0;
    margin: 0;
    float:left;
}
 
.ac_results iframe {
    display:none;/*sorry for IE5*/
    display/**/:block;/*sorry for IE5*/
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    filter:mask();
    width:3000px;
    height:3000px;
}
 
.ac_results li {
    clear:both;
    margin: 0px;
    padding: 2px 5px;
    cursor: default;
    display: block;
    font-size: 16px;
    line-height: 16px;
    overflow: hidden;
}
.ac_results li p{
    float:left;
    margin:0;
    padding:0;
}
.ac_results li span{
    margin:0;
    padding:0;
    float:right;
    font-size: 12px;
}
.ac_loading {
    background : Window url('../images/indicator.gif') right center no-repeat;
}
 
.ac_over {
    background-color: Highlight;
    color: HighlightText;
}

*源码下载地址：

https://files.cnblogs.com/files/QW-lzm/input-auto.rar

js仿百度搜索框

1.js仿百度搜索框<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><script>functionshow(json){letoUl=document.getElementById(‘ul1‘);oUl.innerHTML=‘‘;json 查看详情

android学习实现带自动补全与历史记录的自定义搜索框(代码片段)

带自动补全与历史记录的自定义搜索框车票列表以及车票详情页的实现请参照博客：Android学习UI模仿练习之“巴士管家”选取车票本篇博客就不再赘述一、界面效果二、设计实现（一）需求分析搜索界面包括搜索框与... 查看详情

怎么做百度搜索的下拉框？

1、实现该功能需依赖jquery.js，jquery.autocomplete.js，先引入这两个js包，以及jquery.autocomplete.css样式文件，如图所示。2、该不全插件要结合input元素使用，也就是在input中进行搜索时，会达到自动提示补全的效果，在html文件中定义inp... 查看详情

搜索输入框提示--输入延迟，仿自动脑学院

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc=‘../node_modules/jquery/dist/jquery.min.js‘></script><style 查看详情

c#中如何实现百度搜索框的效果

参考技术Ac#本身没这个功能，如果是b/s项目的话需要用html+css+js等前端代码实现，如果是c/s项目则需要使用wpf或者winform 查看详情

vue-resource使用(vue仿百度搜索)

1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法(vue仿百度搜索)在输入框中输入a,然后在百度f12==>network==>复制jshttps://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=14 查看详情

自制仿360首页支持拼音输入全模糊搜索和自动换肤

360首页搜索效果如下1、完成编写的schoolnet校园网主要目录结构如下主要实现支持中文、拼音首字母、拼音全字母的智能搜索和换肤页面效果如下主要核心代码如下1、head.jsp<%@pageimport="java.io.File"%><%@pagelanguage="jav... 查看详情

如何没有历史记录？

百度搜索里面老是可以留下历史记录。可不可以不清除，以后就没有历史记录了？就是不管搜索什么，都不会留下痕迹。搜索入门百度搜索简单方便。您只需要在搜索框内输入需要查询的内容，敲回车键，或者鼠标点击搜索框右... 查看详情

仿百度壁纸client——实现搜索动画gesturedetector手势识别，动态更新搜索keyword

仿百度壁纸client（五）——实现搜索动画GestureDetector手势识别，动态更新搜索关键字百度壁纸系列仿百度壁纸client（一）——主框架搭建,自己定义Tab+ViewPager+Fragment仿百度壁纸client（二）——主页自己定义ViewPager广告定时轮播图... 查看详情

仿百度图片毛玻璃效果

<!doctypehtml><html><head><metacharset="utf-8"><metahttp-equiv="description"content="兼容性的局部模糊毛玻璃效果效果-百度图片首页示意»张鑫旭-鑫空间-鑫生活"/><metaname="description"content="张鑫旭we 查看详情

canvas仿百度贴吧客户端loading小球

前言几天前在简书上看到在一篇文章《Android仿百度贴吧客户端Loading小球》，看了一下作者，他写了两个好玩的demo，效果图如下：今天趁着周末有空，用H5的Canvas仿了一下。这篇文章只实现第一个效果图。这是我实现的效果：实... 查看详情

高仿百度搜索引擎

这是百度搜索HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"href="css/baiduFirst.css"></head><body> 查看详情

模拟百度搜索框

在使用百度搜索是，页面会根据我们输入的内容自动匹配一些候选内容。实现的主要过程主要是：1、用户在输入一个字符结束后，在onkeyup事件中获取用户输入的内容。2、根据获取到的内容向服务器发送请求，匹配到相似的数据... 查看详情

arcgisjs学习笔记2实现仿百度的拖拽画圆

一、前言吐槽一下，百度在国内除了百度地图是良心产品外，其他的真的不敢恭维。在上一篇笔记里，我已经实现了自定义的地图测量模块。在百度地图里面（其他地图）都有一个周边搜索的功能，拖拽画... 查看详情

仿淘宝搜索框

<styletype="text/css"> #search{ margin:100pxauto; width:300px; height:40px; position:relative; } #searchinput{ width:200px; height:20px; } #searchlabel{ position:absolute; left:20px; t 查看详情

visualstudio中自动代码补全功能插件visualassistx的使用

当你写代码时，自动提示会大大增加效率。但是默认的visualstudio是没有那么强大的，只是提示部分代码。现在推荐代码补全功能插件VisualAssistX，效果如下：安装使用方法：依次点击扩展----扩展管理点... 查看详情

javascript_dom百度搜索框

今天给大家带来的事一个简单的百度的历史搜索框，大家在搜索东西的时候，百度会自动给你显示你最近搜索过的一些东西，那这个拿js怎么做呢？我们一起来学习吧这是一个HTML页面：1<!DOCTYPEhtml>2<html>3<head>4<metac... 查看详情

搜索自动提示的简单模拟jquery

使用jQuery实现类似于百度搜索时的自动完成功能，界面效果所示。首先在输入框上注册keyup事件，然后在事件中通过AJAX获取JSON对象。取得数据后，每一项数据创建一个li标签，在标签上注册click事件，这样当我们点击每一项的时... 查看详情