Java 输入框联想_ajax实现文本框的联想功能

先写一个jsp通过ajax传值给servlet进行查询再传给对应的div进行显示。

联想搜索功能

$("input[name=uname]").css({"position":"relative"});

$("#lns").css({"border":"1px #ccc solid","width":"171px","position":"absolute","top":"84px","left":"72px","display":"none"});//键盘松开的时候触发联想功能

$("input[name=uname]").keyup(function(){

var uname= $(this).val();if(uname != ""){

$.ajax({

url:"Qservlet",

type:"post",

data:{"uname":uname},

dataType:"html",

async:true,

success:function(result){

$("#lns").show();

$("#lns").html(result);//点击模糊列表的值,必须在这里写,其他位置不起作用

$("li").unbind("click").bind("click", funct

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现输入框联想功能,可以使用Vue的computed属性和watch属性来实现。 首先,我们可以使用computed属性来动态计算输入框联想的结果。在computed属性中,我们可以根据输入框的值和数据源进行过滤,返回一个符合条件的联想词列表。 然后,我们可以使用watch属性来监听输入框的值的变化。当输入框的值改变时,watch属性会触发相应的回调函数,我们可以在这个回调函数中更新联想词列表的值。 以下是一个简单的示例代码: ```html <template> <div> <input type="text" v-model="inputValue" @input="handleInput" /> <ul> <li v-for="item in suggestList" :key="item">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { inputValue: '', suggestList: [] }; }, computed: { filteredList() { return this.suggestList.filter(item => item.includes(this.inputValue) ); } }, watch: { inputValue(newVal) { // 模拟异步请求获取联想词数据 setTimeout(() => { this.suggestList = ['apple', 'banana', 'cherry', 'date']; }, 500); } }, methods: { handleInput() { // 清空联想词列表 this.suggestList = []; } } }; </script> ``` 在以上示例中,我们通过v-model指令将输入框的值与data中的inputValue进行双向绑定。在computed属性中,我们使用filter函数对数据源suggestList进行过滤,只返回包含输入框值的联想词。在watch属性中,我们监听inputValue的变化,并在回调函数中通过模拟异步请求获取联想词数据,并将结果赋值给suggestList。同时,我们还在@input事件中调用了handleInput方法,用于清空联想词列表。 这样,当输入框的值改变时,联想词列表会根据新的值进行过滤并更新。 相关问题: 1. 如何实现输入框联想词的实时搜索功能? 2. 如何优化输入框联想功能的性能? 3. 如何实现输入框联想词的下拉选择功能

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值