Question

我正在尝试实现jquery实时输入。当用户开始输入输入时，输入下方将显示建议列表。从该选项列表中，用户应该能够单击其中一个选项，并且该选项的文本应该在输入中。

到目前为止，这是一个过程 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中执行此操作。

Answer 1

使用

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

而不是

$("input#my_input").attr("value", $(this).text());

来自https://stackoverflow.com/a/8312886/2445864的很好的解释：

对象属性与之间存在大差异   对象属性

有关一些差异，请参阅此问题（及其答案）：   .prop() vs .attr()

要点是.attr(...)只获取对象的值   start（创建html时）。 val()正在获取对象   属性值，可以多次更改。

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

jquery 1.10版本：用户输入的输入值无法更改

1 个答案: