Question

我正在尝试输入以查找列表中的单词。该指令说查找输入字段应包含用户的查询。当查询为空时，列表框必须显示整个单词，每当查询更改时，列表框将立即更新以显示包含查询文本的所有单词（表示已找到多少单词）。列表框应该在用户输入时不断更新。以下是我的想法;我无法将输入（使用查询）与单词列表链接;我的＆＃34;清除＆＃34;底部也不起作用。关于如何制作它的任何建议？

   <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>

Answer 1

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

＆＃13;

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

＆＃13;

Answer 2

您必须将输入标记的ID设置为＆＃34;查找＆＃34;。以下内容将清除您的输入字段。

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

对于其他所有内容，请jsFiddle

这应该让你去。

Answer 3

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

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

您可以使用input事件更新每个用户输入的select option元素;创建一个函数来调用现有$.each()的{{1}}部分;利用js来匹配单词，String.prototype.split()来匹配匹配，$.grep()来传递匹配单词的数组，以便在$.map()元素处更新html。

＆＃13;

label

＆＃13;

$(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);

});

＆＃13;

Answer 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>

创建一个输入，只要用户输入

4 个答案: