2016-01-26 119 views
0

我想实现一个jQuery实时输入。当用户开始在输入中输入时,建议列表将出现在输入下方。从该选项列表中,用户应该能够点击其中的一个,并且该选项的文本应该在输入中。jquery 1.10版本:用户输入的输入值不能更改

这里的进程迄今 https://jsfiddle.net/eckae003/1/

HTML

<input type="text" name="subject" id="my_input"/> 
<ul> 
<li><a href="#">English</a></li> 
<li><a href="#">General English</a></li> 
<li><a href="#">Business English</a></li> 
<li><a href="#">French</a></li> 
<li><a href="#">Russian</a></li> 
<li><a href="#">German</a></li> 
</ul> 
<span id="label"></span> 

jQuery的

$("ul li a").click(function(){ 
    $("input#my_input").attr("value", $(this).text()); 
    $("span#label").html($(this).text()); 
}) 

$("input#my_input").keyup(function(){ 
    var text = $(this).val(); 
    $("ul li").each(function(){ 
    if ($(this).text().search(new RegExp(text, "i")) < 0) { 
     $(this).fadeOut(); 
    } else { 
     $(this).show();     
    } 
    }); 
}) 

它的工作的1.8.3版本,但我想这样做jQuery中的较新版本。

+0

你有代码的一个具体问题?你的小提琴链接在1.10中工作正常,正如你可以在下面的小提琴中看到的,代码在jQuery 2.1.4中工作正常:https://jsfiddle.net/eckae003/2/。 –

回答

0

使用

$("input#my_input").val($(this).text()); 

,而不是

$("input#my_input").attr("value", $(this).text()); 
https://stackoverflow.com/a/8312886/2445864

尼斯解释:

有一个对象之间的差异性质和 对象属性

看到这个问题(和它的答案)对于一些差异: .prop() vs .attr()

要点是,.attr(...)仅在 开始获取对象的值(在创建HTML时)。 val()正在获取对象的 属性值可以改变很多次。

更新小提琴:https://jsfiddle.net/eckae003/4/

+0

这应该是一条评论。 –

+0

非常感谢。这工作正常 –