html搜索框点击出现提示,js实现搜索提示框效果

本文实例为大家分享了js实现搜索提示框效果的具体代码，供大家参考，具体内容如下

首先写静态页面

CSS样式

* {

margin: 0;

padding: 0;

}

html,

body {

background: darkgray;

}

.container {

position: absolute;

left: 50%;

top: 50px;

transform: translateX(-50%);

}

#search {

width: 300px;

height: 50px;

padding-left: 10px;

border-radius: 5px;

border: none;

outline: none;

}

#alert {

width: 312px;

position: relative;

left: -1px;

display: none; /* 将ul列表隐藏 */

}

#alert > ul {

list-style: none;

margin: 0;

padding: 0;

}

#alert > ul > li {

border: 0.5px solid #000;

height: 40px;

line-height: 40px;

padding-left: 10px;

border-radius: 5px;

background: #fff;

}

#alert > ul:last-child {

border-bottom: 1px solid #000;

}

JS代码

var $search = $("#search");

var $alert = $("#alert");

var $alertUl = $("#alert>ul");

// 清空列表的方法

function clearUl() {

$alertUl.empty();

}

$search

.bind("input", function () {

// 清空列表

clearUl();

// 获取到用户所输入的内容

var value = $(this).val();

// console.log(value);

// 使用getJSON方法获取json数据

$.getJSON("data/server4.json", function (data) {

// console.log(data);

// 获取到json数据中的name值

$.each(data, function (input, obj) {

// console.log(obj);

var name = obj.name;

// console.log(name);

if (name.indexOf(value) >= 0) {

// 表示输入的内容在name中存在

var valueArr = obj.value;

// console.log(valueArr);

$.each(valueArr, function (input, text) {

// console.log(text);

// 将数据添加到HTML页面

$alertUl.append(`

${text}`);

});

}

});

// 将ul列表显示出来

$alert.css("display", "block");

})

.bind("blur", function () {

$alert.css("display", "none");

});

实现效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html搜索框点击出现提示,js实现搜索提示框效果相关推荐

php alert弹框按钮,PHP 实现类似js中alert() 提示框
主要应用于添加判断提示,跳转,返回,刷新. /** * JS提示跳转 * @param $tip 弹窗口提示信息(为空没有提示) * @param $type 设置类型 close = 关闭 ,bac ...
html 多选框点击事件,jquery/javascript:单击复选框上的事件和“checked”属性
代码: $('input.media-checkbox').live('click', function(e){ e.preventDefault(); var that = $(this); if ...
html 单选框、复选框点击文字选中
html 单选框.复选框点击文字选中示例1(单选框) <input type="radio" value="1" id="score1&qu ...
html中搜索框提示语,JS实现搜索关键词的智能提示功能
最近在百度搜索的时候,当你输入一个字或者词的时候,他会给你们弹出一个下拉框出来,里面是和你相关的搜索提示比如我输入杨字,他会给我提示以下搜索提示我尝试着用JavaScript做了一个类似的练习, ...
JS实现搜索按钮的点击事件
JS实现搜索按钮的点击事件开发工具与关键技术:DW JS 作者:易金亮撰写时间:2019.02.02 在各个网页或者软件中,往往离不开搜索框以及搜索按钮,下面我们来用JS实现简单的搜索按钮点击事件 ...
智能搜索框html代码,js实现搜索框关键字智能匹配代码
只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在 ...
js实现搜索框跳转功能
毕设篇:搜索框的逻辑实现功能说明实现搜索框的响应跳转功能,符合匹配条件跳转对应页面,不符合弹出alert提示框或跳转404页面案例实现源码提取码:love 效果展示代码 ...
数据库关键字搜索查询html,js实现搜索框关键字智能匹配代码
只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在 ...
html在文本框中显示内容,js如何实现点击标签文字，文字在文本框出现
js实现点击标签文字,文字出现在文本框里,下面2种方法实现的功能略有不同,总体来说方法一功能更强大. 第一种方法:随意点击任何标签都会出现在文本框中,如何第二次点击标签,对应的文字就会在文本框中消失. ...
chosen.jquery.js 有搜索功能、多选功能的下拉框插件
chosen.jquery.js 有搜索功能.多选功能的下拉框插件官方源码: https://github.com/harvesthq/chosen 该源码中的样例index.html有该插件的详 ...

html搜索框点击出现提示,js实现搜索提示框效果

html搜索框点击出现提示,js实现搜索提示框效果相关推荐

最新文章

热门文章