html中怎么获取搜索框中的值,input搜索框如何获取li标签中的值?

这是个模糊搜索框,但是我要怎么做才能获取到下拉列表的中被填入input框中的值呢?比如说我输入pc,然会出来这些pc号码,我用键盘里的方向键或者鼠标点击其中一个pc4,这样input框就会显示pc4同时下拉菜单被收起来,问题就是我要怎么获取到这个input框中的pc4这个值呢???

对了 我这些数据是从后台请求过来的,包括整个搜索框都是用js代码动态建立的,所以我本来是想用alert($("#searchBox").val());这种方法来显示input框的值,但是什么都显示不了,可能是搜索框建立的时候就没有值,所以就这样,所以有没有办法在页面加载完之后,我选中下拉菜单中的任意一个li标签到input框,我都能从input框中得到这个li的值?

ada536922b4b7664ce5c1f7f9b1a0c8f.png

大概的代码:

var searchBox = $("

$("#syyy_zmsx").append(searchBox);

....

if($("#searchBox").val()!=""){

alert($("#searchBox").val());

}

console.log($("#searchBox").val());

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在vue.js页面,当有多个input搜索框需要实现防抖操作时,可以使用以下方法: 1. 使用lodash库提供的_.debounce()函数。该函数可以将一些被频繁调用的函数在规定时间内只执行一次。将需要进行防抖的搜索函数作为debounce函数的参数即可。但是,如果页面有多个搜索框需要实现防抖操作,每个搜索框都需要调用该debounce函数,代码重复,不够优雅。 2. 使用vue.js的mixin混入功能。将防抖操作的代码封装到一个mixin混入对象,然后在需要的组件配置该mixin,即可实现防抖操作。这种方法更加优雅,代码结构更加清晰。 下面是一个搜索组件的样例代码: ```vue <template> <div> <input type="text" v-model="searchText" @input="debounceSearch"/> <ul> <li v-for="result in searchResults" :key="result.id">{{ result.name }}</li> </ul> </div> </template> <script> import searchMixin from 'searchMixin.js' // 引入定义好的mixin混入对象 export default { name: 'Search', mixins: [searchMixin], // 在组件引用该mixin data () { return { searchText: '', searchResults: [], } }, methods: { search () { // 搜索逻辑 this.searchResults = [] if (this.searchText) { this.searchResults = [ {id: 1, name: 'result1'}, {id: 2, name: 'result2'}, // ... ] } }, }, mounted () { console.log('search component mounted') } } </script> ``` searchMixin.js: ```javascript import _ from 'lodash' export default { methods: { debounceSearch: _.debounce(function () { this.search() }, 500) } } ``` 在以上样例代码,searchMixin.js定义了一个防抖操作函数debounceSearch,将需要防抖的搜索函数search作为debounce函数的参数。组件引用了该mixin,在input的@input事件调用debounceSearch函数实现防抖操作。这样,当用户在搜索框快速输入时,搜索函数search不会被频繁调用,而是在规定的时间间隔内只会执行一次,节省了系统资源,提高了性能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值