js 模糊提示

最新推荐文章于 2021-08-06 11:32:39 发布
最新推荐文章于 2021-08-06 11:32:39 发布
阅读量139 收藏
点赞数
文章标签： QQ Apple REST Windows
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_16106/article/details/81888856
版权
[quote]本文转载别人的代码。原来的网址忘记了[/quote] 

<html> 
<body> 
<style> 
ul,li{margin: 0; padding: 0;width:100%;} 
</style> 
<script language="javascript" type="text/javascript"> 
function checkword() 
{ 
   var wordvalue=document.getElementById("word").value.toLowerCase(); 
   var alltxt="管理员|apple苹果|all全|big大|bad坏|cut剪切|car车|daph8|eeg|egg|eat|fuck|fuck you|fix|good|hand|hidden|ill|jack|jad|kevin|long|man|number|oio|part|pp|quit|QQ|rest|reg|set|submit|time|tag|uuzo.cn|uuzo|view|windows|want|xy|xun|young|yuyu|zoo|Zzz|锋.David|David|哈哈|www.uuzo.cn|www.uuzo.com"; 
   var alltxtpp=alltxt.toLowerCase(); 
   var alltxt_xiang=alltxt.split("|"); 
   var alltxt_xiang1=alltxtpp.split("|"); 
   var inhtml="<ul>" 
   var isyou=0; 
   for (i=0;i<alltxt_xiang1.length;i++) 
   { 
       if (alltxt_xiang1[i].substr(0,wordvalue.length)==wordvalue) 
       { 
           inhtml=inhtml+"<li onclick=\"document.getElementById('word').value=this.innerHTML"+wordvalue+";document.getElementById('showmenu').style.display='none';\" onmouseover=\"this.style.backgroundColor='#666666'\" onmouseout=\"this.style.backgroundColor=''\">"+alltxt_xiang[i]+"</li>"; 
           isyou=1; 
       } 
   } 
   inhtml=inhtml+"</ul>"; 
   if (isyou==1) 
   { 
       document.getElementById("showmenu").innerHTML=inhtml; 
       document.getElementById("showmenu").style.display=""; 
   } 
   else 
   { 
       document.getElementById("showmenu").innerHTML=""; 
       document.getElementById("showmenu").style.display="none"; 
   } 
   if (wordvalue=="") 
   { 
       document.getElementById("showmenu").innerHTML=""; 
       document.getElementById("showmenu").style.display="none"; 
   } 
} 
</script> 
<input type="text" name="word" size="20" id="word" onkeyup="checkword()" style="border:1px solid #666666;width:200px;height:25px;"> 
<div style="position: absolute; width: 200px; height: 100px; z-index: 1; left: 10px; top: 40px;border:1px solid #666666;display:none;" id="showmenu"></div></body></html>

iteye_16106
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html搜索框 模糊搜索,前端js模糊搜索（模糊查询）
weixin_36267615的博客
06-04 4892
1.html结构：/*查询结果放ul里面*/2.css样式：#searchShop{line-height:28px;text-indent:5px;width:180px;float:leftheight:28px;border:none;}.searchShopBtn{font-size:0;padding-left:15px;padding-right:15px;backg...
js模糊搜索
学全栈、大前端方向，就找前端早间课
10-16 3216
js模糊搜索 + 实战 + 所谓模糊查询就是列表中的数据是否有符合关键字或某个字符,实现的操作方法主要有两种: 1.字符串方法indexOf： 代码如下： let list = ["长宁区", "闵行区", "嘉定区 "]; let arr = []; for(let i = 0; i < list.length; i++){ //如果字符串中不包含目标字符会返回-1 if( list[i].indexOf
javascript input输入框模糊提示功能的实现
10-19
主要介绍了javascript input输入框模糊提示功能的实现的相关资料,希望通过本能帮助到大家，需要的朋友可以参考下
ajax下拉列表模糊,JS仿百度自动下拉框模糊匹配提示
weixin_34413326的博客
08-06 431
实际项目中，我们可以把数据获取改成ajax动态获取，在 getContent()中js/jQuery实现类似百度搜索功能#container {position: absolute;left: 50%;top: 40%;}#content {float: left;position: relative;right: 50%;}input {border: 0;width: 288px;height...
js input搜索框自动补全及模糊搜索
热门推荐
青梅煮酒论英雄的博客
03-30 1万+
一.搜索的html 注意:自动补全和模糊搜索用的是jquery-ui组件，使用时需引入jquery-ui的js和css &lt;div class="top_search" data-open="no"&gt; &lt;input type="text" id="search_con"&gt; &lt;/div&gt; 二、搜索值和
实现类似百度搜索框中模糊提示功能
07-14 7941
通常，在我们使用百度的时候，在输入框中输入某一个字段的时候，就可以查询到相关的信息。类似的功能可以通过JS的框架来实现(显然不会像百度那么强大)。jquery提供了一种扩展插件。可以实现获取文本框内容然后自动向后台提交请求。下面通过一段代码来展示这种功能。在使用这种扩展插件的时候，需要使用到 这两个文件。 通过如下代码：$(function(){ applymentAutoCom
js实现模糊匹配
珍妮的小罐君
02-15 8937
功能描述： 在搜索框中输入某一个字段，可以查询到相关的内容 功能实现： 1.  先声明变量用于保存输入框以及表格里面的内容 2.  循环遍历 遍历表格每一行，查找匹配项 3.  判断 如果输入框里面的内容跟表格中某个td的内容相似，则表格中的某行就显示，否则隐藏 代码实现：   &lt;html&gt; &lt;head&gt; &lt;style&gt;...
html中自动提示js,js实用表单模糊搜索和自动提示插件
weixin_29191081的博客
06-04 198
fuzzysearch是一款实用的表单模糊搜索和自动提示js插件。该js插件允许你只输入部分字符串，根据这部分字符串自动搜索和匹配，并给出自动替代选项。适用于各种数据的快速检索。安装可以使用npm来按钮该自动提示插件。npm install --save fuzzysearch使用方法fuzzysearch(needle, haystack)DEMO中的js文件时基于fuzzysearch.js来...
input输入框模糊提示功能
Lovnx
04-19 4840
主要用到了jQuery.autocomplete函数，定义好一个数组就可以用这个功能了，很方便。<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <sc
jquery模糊提示框
10-30
模糊查询提示框，根据输入内容随时更新提示框。支持鼠标点击、上下enter键选择。 使用简单 导入js文件，使用$.selects({});即可。 脚本有大量注释。也可通过头部参数作简单控制。 注意：案例是在页面做的一个模拟...
JS仿百度自动下拉框模糊匹配提示
10-21
主要介绍了JS仿百度自动下拉框模糊匹配提示 的相关资料,需要的朋友可以参考下
使用js实现文本框模糊查询自动提示
10-11
使用js实现模糊查询自动提示 使用js实现模糊查询自动提示
ASP网上拍卖系统设计与实现(论文+源代码+开题报告).rar
08-10
资源包主要包含以下内容： ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。 详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。
基于Android远程监控工具设计与实现.docx
最新发布
08-10
基于Android远程监控工具设计与实现.docx
C#网络办公助理设计与实现(源代码+论文).rar
08-10
资源包主要包含以下内容： ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。 详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。
[毕业设计]VB环境下身份证信息管理系统的设计与实现(源代码+论文).zip
08-10
[毕业设计]VB环境下身份证信息管理系统的设计与实现(源代码+论文)
node.js安装与配置以及clone代码.md
08-10
node.js安装与配置以及clone代码.md
华为FusionSphere-3.0-基础架构虚拟化解决方案
08-10
华为FusionSphere_3.0_基础架构虚拟化解决方案介绍，PPT格式
ant-design-vue输入时模糊提示功能
05-17
ant-design-vue提供了一个AutoComplete组件，可以实现输入时的模糊提示功能。 首先，你需要在组件中引入AutoComplete： ```html <template> <a-auto-complete :options="options" v-model="value" placeholder="请输入关键字"></a-auto-complete> </template> <script> import { AutoComplete } from 'ant-design-vue'; export default { components: { AutoComplete, }, data() { return { options: [...], value: '', }; }, }; </script> ``` 其中，options是一个包含所有可供提示的选项的数组，value是输入框的值。 接下来，你需要在options数组中定义所有可供提示的选项： ```javascript [ { value: 'Apple' }, { value: 'Banana' }, { value: 'Cherry' }, { value: 'Durian' }, { value: 'Eggfruit' }, { value: 'Fig' }, ] ``` 这里只定义了value属性，实际上，你可以定义任意的属性。 最后，你需要在AutoComplete组件中使用filter-option属性指定如何过滤选项： ```html <a-auto-complete :options="options" v-model="value" placeholder="请输入关键字" :filter-option="filterOption"></a-auto-complete> ``` ```javascript export default { // ... methods: { filterOption(inputValue, option) { return option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1; }, }, }; ``` filterOption方法用于判断每个选项是否应该被显示。它接受两个参数：inputValue是输入框中的值，option是当前需要判断的选项。在上面的例子中，我们根据选项的value属性进行了大小写不敏感的匹配，只要选项的value包含输入框中的值，就返回true。 这样，你就可以实现输入时的模糊提示功能了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值