创建一个输入，只要用户键入，它就会不断更新单词列表答案

【问题标题】：creating an Input that updates constantly a list of words as soon as the user types创建一个输入，只要用户键入，它就会不断更新单词列表
【发布时间】：2016-03-24 02:50:58
【问题描述】：

我正在尝试输入以从列表中查找单词。该指令说查找输入字段应包含用户的查询。当查询为空时，列表框必须显示整个单词，并且每当查询更改时，列表框会立即更新以显示包含查询文本的所有单词（说明已找到多少单词）。列表框应随着用户键入而不断更新。以下是我想出的；我无法将输入（使用查询）与单词列表联系起来；我的“清晰”底部也不起作用。有什么制作方法的建议吗？

   <body>
   <div>
    Find: <input type="search" placeholder="Search..." />
    <button>Clear</button>

    <script>
    $(document).ready(function() {

        $("button").click(function() {
            $("#Find").empty();
        });
    });
    </script>

    <select name="select" size="10" class="selection">
</select>
</div>

<script>
var words = [
    "a",
    "aabby",
    "about",
    "action"
];

$.each(words, function(i, word) {
    $(".selection").append("<option value='" + word + "'>" + word + "</option>");
});
</script>

</body>

</html>

【问题讨论】：

您的问题不代表任何类型的研究。向我们展示已尝试过的内容以及未按预期工作的内容..

标签： javascript jquery html

【解决方案1】：

你的意思是这样的下拉选择吗：

<input type="text" list="words" value=""></input>
<datalist id="words">
  <option value="a">
  <option value="aabby">
  <option value="about">
  <option value="action">
</datalist>

【讨论】：

【解决方案2】：

您必须将输入标签的 id 设置为“查找”。以下将清除您的输入字段。

$('#Find').val('');

对于其他一切，这里是 jsFiddle

这应该能让你继续前进。

【讨论】：

【解决方案3】：

在设置为 "Find" 的 input 元素处添加了 id 属性， label 元素显示匹配数。

用.val() 替换.empty() 以清除value 的input 元素。

您可以在每次用户输入时使用input 事件更新select option 元素；创建一个函数来调用现有js 的$.each() 部分；利用String.prototype.split() 匹配单词，$.grep() 过滤匹配，$.map() 将匹配单词数组传递给函数，该函数在label 元素处更新html。

$(document).ready(function() {

  $("button").click(function() {
    $("#Find").val("");
    update(words)
  });

  var words = [
    "a",
    "aabby",
    "about",
    "action"
  ];

  var selection = $(".selection"),
    input = $("input[type=search]"),
    label = $("label");

  function update(words) {
    selection.html("");
    $.each(words, function(i, word) {
      selection.append("<option value='" + word + "'>" + word + "</option>");
    });
    label.text("Results:" + selection.find("option").length);
  }

  input.on("input", function(e) {
    var val = e.target.value,
      keys = val.split(/\s+/),
      html = $.map(keys, function(key) {
      return $.grep(words, function(word) {
        return word === key 
        || word.slice(0, key.length) === key 
        || word.indexOf(key) > -1
      })
    });

    console.log(html);
    update(html);
  });
  
  update(words);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<div>
  Find:

  <input id="Find" type="search" placeholder="Search..." />
  <label></label>
  <button>Clear</button>

  <script>
  </script>

  <select name="select" size="10" class="selection">
  </select>
</div>

【讨论】：

太好了！但是，我不知道有可能执行搜索任务的外部 js 文件，所以我为自己寻找更简单和替代的方法来理解我在此页面的主要问题下上传的内容。但仍然不确定我错在哪里！
@Alex js at stacksn-ps 是否返回预期结果？搜索算法可能会因预期的输出结果而异。 “所以我找的有点容易” 不确定“更容易”是什么意思？另见stackoverflow.com/a/29324737

【解决方案4】：

我实际上想出了另一种方法，因为有一个外部 js 文件，其中包含用于搜索的代码。

var Dictionary = function(words) {

/**
 * Searches over this dictionary for the given query string. A word will
 * match if any substring of it matches the query. It is case-insensitive.
 *
 * @param query the substring to search for
 * @returns an array of the results that contain the query substring
 */
this.search = function(query) {
    var pattern = new RegExp(query, "i");
    return $.grep(words, function(w) {
        return pattern.test(w);
    });
};

/**
 * Returns the total number of words in this dictionary
 *
 * @returns the number of words in this dictionary
 */
this.size = function() {
    return words.length;
}

/**
 * Returns an array of all of the words in this dictionary
 *
 * @returns an array of all of the words in this dictionary
 */
this.all = function() {
    return words;
}

}

这是我的 html 代码；但是我不明白为什么它不搜索输入并且不更新“#WordCounter”。

<script type="text/javascript" src="jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="dictionary.js"></script>



<script type="text/javascript">

  
var words=	[
    "a",
    "able",
    "about",
    "account",
    "acid",
    "across",
    "act",
    "addition",
    "adjustment",
    "advertisement",
    
];



	function updateWordList(){
	$("#inputText").val("");
	$("#selection").empty();
	
  	$.each(words, function (key, value) {
    $("#selection").append($("<option/>").val(key).text(value));
    });
	}
	
	

	function partialWordList(searchResults){
	$("#selection").empty();
	
		
    $.each(searchResults, function (key, value) {
    $("#inputText").append($("<option/>").val(key).text(value));
	
		
    });

}

	$(document).ready(function() {
	var dict = new Dictionary(words);
	
	

});
	
	updateWordList();
	$("#inputText").on("change paste keyup",function(){
		var partialWord=$(this).val();
		var searchResults= dict.search(partialWord);
		partialWordList(searchResults);
		
	var len=searchResults.length;
	$("#WordCounter".text(len+"contain"+$("#inputText").val()));
		

  	$("#clear").click(updateWordList);
	
});

</script>

html {
        background-color: #C0C0C0;
    }
     div{
        width:400px;
        margin:40px auto;
        position: absolute;
        left: 20px;
    }
	select{
		width:400px;
        margin:40px auto;
        position: absolute;
        left: 20px;

	}

<body>

<div>Find: 
  <input type="text" id="inputText" placeholder="Search..."/>
  <button id= "clearButton">Clear</button>

    
    <p id= "WordCounter">10 words in total</p>
    <select size="7" id="selection" >
    </select>
  </div>
  
  </body>

【讨论】：