自动匹配输入框

最新推荐文章于 2024-07-20 23:54:17 发布
最新推荐文章于 2024-07-20 23:54:17 发布
阅读量417 收藏
点赞数
文章标签： javascript apple border function windows rest

<html>
<head>
<title>
 
</title>
<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="admin管理员|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|哈哈|[url]www.uuzo.cn[/url]|[url]www.uuzo.com[/url]";
  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 οnclick=/"document.getElementById(&#39;word&#39;).value=this.innerHTML;document.getElementById(&#39;showmenu&#39;).style.display=&#39;none&#39;;/" οnmοuseοver=/"this.style.backgroundColor=&#39;#666666&#39;/" οnmοuseοut=/"this.style.backgroundColor=&#39;&#39;/">"+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>
</head>

<body>
 <input type="text" name="word" size="20" id="word" οnkeyup="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> 

liqiang_cn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现输入框输入的自动匹配功能
05-27
NULL 博文链接：https://weick.iteye.com/blog/603092
自动匹配可输入的下拉框
06-04
自动匹配，可输入可选择的下拉框 可手写，可选择 方便实用。
带有输入自动匹配功能的Combobox
学而不思则罔
02-15 5206
原文地址: http://blog.csdn.net/lsldd/archive/2009/09/25/4595386.aspx   在原文的基础上,修改了两点: (1) 使在输入了一个完整的匹配项,或者回车选中某项时,触发CBN_SELCHANGE消息. (2) Sh
实现简单动态自动匹配输入的内容
逍遥小章
01-21 1305
用这两个控件 分别实现这两个： package com.example.autocomplete; import android.app.Activity; import android.os.Bundle; import android.util.Log; import andr
下拉框（可输入+自动匹配）
weixin_30493321的博客
10-23 1796
实现可输入+带自动匹配功能的下拉框，我试过以下几种方法： 1.直接使用h5的新标签<datalist>，对应demo如下： <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="F...
input输入框的自动匹配(原生代码)
09-05
【输入框自动匹配原生实现】的原理与步骤 在前端开发中，输入框自动匹配功能常见于搜索框，能够根据用户输入的内容实时展示匹配的选项。本问题要求使用原生JavaScript来实现这一功能，不依赖任何框架。下面将详细...
输入框自动匹配
04-02
在Java Web开发中，"输入框自动匹配"是一项常见的功能，它通常用于搜索框或表单填写场景，能够根据用户输入的内容动态展示匹配的建议数据，提升用户体验。这个功能涉及到的技术主要包括JavaScript、Ajax以及后端服务...
基于javascript实现仿百度输入框自动匹配功能
10-23
主要介绍了基于javascript实现仿百度输入框自动匹配功能的相关资料,需要的朋友可以参考下
JS实现仿百度输入框自动匹配功能的示例代码
10-26
本篇文章主要是对JS实现仿百度输入框自动匹配功能的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
利用js 进行输入框自动匹配字符的小例子
10-27
在网页开发中，输入框（Input）是用户与页面交互的重要元素之一，而输入框自动匹配字符的功能可以极大地提升用户体验，特别是在搜索、建议输入等场景。这个功能通常被称为自动补全（Autocomplete）或自动提示（Auto-...
文本输入自动匹配完型
JXISH001的博客
04-17 175
英语完型 这个帖子直接拷贝就可以了 https://blog.csdn.net/testcs_dn/article/details/45293253 顺便说， 提取自动完型字典， 可以用 foreach语句 string dictionaryText= "Dictionary: \r\n"; foreach (string text in sourc...
[原]考试系统——可输入并自动匹配的下拉框（一）——实现可输入并自动匹配...
dfu54516的博客
11-13 556
自动匹配，像我们平时用的百度，谷歌，如果输入某个字下面会自动匹配出很多内容来，让我们用起来很方便。 我们平时做项目，下拉框用DropDownList很方便，绑定数据库即可把数据显示在下拉框中，方便快捷，但是为了更好的用户体验度，如果下拉框的内容很多的时候，下拉找相应内容都看花眼了，很浪费时间。这时就需要用到自动匹配，只要输入相应关键字就可以查找出一系列的内容。 ...
Next.js静态导出与动态路由优化
最新发布
天涯学馆
07-20 682
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1033
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 503
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps
yuan5025的博客
07-17 953
目前这个问题只在芋道源码yudao-ui-admin-vben碰到了，其他vue项目没用遇到过。
vue自动补全输入框
09-14
Vue自动补全输入框是一种在用户输入内容时，根据已有的选项列表自动匹配并提示补全的功能。这样可以提高用户的输入效率和准确性。 对于Vue自动补全输入框的实现，可以使用Vue的官方插件Vue-Autocomplete来实现。Vue-Autocomplete是一个基于Vue的自动补全组件，它可以根据用户输入的内容，通过Ajax请求或者静态的选项列表，动态生成匹配的选项并展示在下拉框中供用户选择。 使用Vue-Autocomplete，需要在Vue项目中引入Vue-Autocomplete的依赖库，并且在组件中使用Vue-Autocomplete组件。在Vue-Autocomplete组件中，需要设置选项列表数据源、设置选项的显示字段和值字段、设置最小输入字符数等相关配置。当用户输入内容时，Vue-Autocomplete会自动根据输入内容筛选匹配的选项，并将匹配的选项展示在下拉框中供用户选择。 另外，也可以使用其他的Vue插件或者自己实现自动补全输入框的功能。可以根据具体的需求和项目情况选择合适的实现方式。 总结起来，Vue自动补全输入框是一种通过选择列表中的选项来自动补全用户输入内容的功能，可以通过Vue-Autocomplete等插件来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值