关于VUE中input输入后出现下拉框出现提示的小技巧

Posted 2023-04-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于VUE中input输入后出现下拉框出现提示的小技巧相关的知识，希望对你有一定的参考价值。

参考技术A

怎么在VUE中出现类似于百度，谷歌那种输入后出现下拉提示框？
由于我用的是饿了么开发的element-ui前端开发框架，所以可以用element-ui的input组件中的 el-autocomplete http://element-cn.eleme.io/#/zh-CN/component/input

这是例子的中算法。其实很简单，就是indexOf的简单应用。
但是这个 ===0 只能从开头匹配。全字段匹配就要改成 >-1

可以参考我自己写的例子
Github: https://github.com/fredfeng0326/inputsearch
实例地址: < https://fredfeng0326.github.io/inputsearch/

js 中怎么从input获取输入的value值

1、使用提示框可以获取输入。
提示框用于提示用户输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
语法：
prompt("文本","默认值")。如:
var value=prompt("北京奥运会是哪一年？","2008");
2、使用文本框或文本域可以获取输入，如:
<html>
<head>
<script type="text/javascript">
function getValue()

var v=document.f.t.value;
alert(v);

</script>
</head>
<body>
<form name="f">
<input type="text" name="t" />
<input type="button" value="输入文本，再点我" onclick="getValue();"/>
</form>
</body>
</html> 参考技术A <input id="txt1" name="txt1" type="text" value="" />
<input type="button" value="点我" onclick="getValue();" />
<script>
function getValue()
    var val=document.getElementById("txt1").value;
    //或 var val=document.getElementsByName("txt1")[0].value;
    //或 var val=document.getElementsByTagName("input")[0].value;
    alert("你输入的值是"+val);

</script>

参考技术B 给input 一个ID属性例如：<input type="text" id="name">
$("#name").val();
或者
document.getElementById("name").value 参考技术C

二、javascript方法

通过 name

document.getElementsByName("CSDN_NAME")[0].value

通过 id

var name = document.getElementById("CSDN_NAME").value

通过 class

document.getElementsByClassName("CSDN_NAME")[0].value

还有 jquery获取input值的几种方法

详细可以参照：

jquery获取input值的几种方法

以上是关于关于VUE中input输入后出现下拉框出现提示的小技巧的主要内容，如果未能解决你的问题，请参考以下文章