如何更新单词列表中搜索框中包含用户键入内容的单词/字母数

How to update the number of words/letters containing what user type in a search box in a list of words?

本文关键字：单词 用户 何更新 更新 搜索 列表 包含      更新时间：2023-09-26

当用户搜索任何字母/单词时，我一直试图让小部件框上方的行（"总共10个单词"）动态更改，但未能成功。该行应更改为例如"包含‘ab’的2个单词"。

我使用了这行代码，但没有起作用：

var len= matches.length;
$("#WordCounter".text(len+"contain"+$("#typeahead").val()));

有人知道怎么做吗？

var substringMatcher = function(strs, q, cb) {
  return (function(q, cb, name) {
    var matches, substrRegex;
 
    // an array that will be populated with substring matches
    matches = [];
 
    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');
 
    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        // the typeahead jQuery plugin expects suggestions to a
        // JavaScript object, refer to typeahead docs for more info
        
        matches.push(name(str));
		
      }
	  
    });
 
    cb(matches);
  }(q, cb, function(res){return res}));
};
 
var states = [
    "a",
    "able",
    "about",
    "account",
    "acid",
    "across",
    "act",
    "addition",
    "adjustment",
    "advertisement",
];
 
 	$.each(states, function (key, value) {
    $("#selection").append($("<option/>").val(key).text(value));
    });
 
$("#typeahead").on("input", function(e) {
  substringMatcher(states, e.target.value, function(results) {
    $("#selection").empty();
	
	
	
    $.map(results, function(value, index) {
		
		
    $("#selection").append($("<option/>", {
		
	
      "class":"results" + index,
	  
      "html":value
	  
		
	
		
     })) 
    })
  })
});
	
		$("#clearButton").click(results);
		
html {
        background-color: #C0C0C0;
    }
     div{
        width:400px;
        margin:0px auto;
        position: absolute;
        left: 20px;
    }
	select{
		width:400px;
        margin:40px auto;
        position: absolute;
        left: 20px;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body><div>Find: <input type="text" id="typeahead" /> 
<button id= "clearButton">Clear</button></div><br />
<div> <p id= "WordCounter">10 words in total</p></div>
  <select size="7" id="selection">
    </select>

您的代码包含错误的闭包。必须是：

var len= matches.length;
$("#WordCounter").text(len + " contain " + $("#typeahead").val());

所以最终的html将是

var substringMatcher = function(strs, q, cb) {
  return (function(q, cb, name) {
    var matches, substrRegex;
 
    // an array that will be populated with substring matches
    matches = [];
 
    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');
 
    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        // the typeahead jQuery plugin expects suggestions to a
        // JavaScript object, refer to typeahead docs for more info
        
        matches.push(name(str));
		
      }
	  
    });
 
    cb(matches);
  }(q, cb, function(res){return res}));
};
 
var states = [
    "a",
    "able",
    "about",
    "account",
    "acid",
    "across",
    "act",
    "addition",
    "adjustment",
    "advertisement",
];
 
 	$.each(states, function (key, value) {
    $("#selection").append($("<option/>").val(key).text(value));
    });
 
$("#typeahead").on("input", function(e) {
  substringMatcher(states, e.target.value, function(results) {
    var len= results.length;
    $("#WordCounter").text(len + " contain " + $("#typeahead").val());
    $("#selection").empty();
	
	
	
    $.map(results, function(value, index) {
		
		
    $("#selection").append($("<option/>", {
		
	
      "class":"results" + index,
	  
      "html":value
	  
		
	
		
     })) 
    })
  })
});
	
		$("#clearButton").click(results);
html {
        background-color: #C0C0C0;
    }
     div{
        width:400px;
        margin:0px auto;
        position: absolute;
        left: 20px;
    }
	select{
		width:400px;
        margin:40px auto;
        position: absolute;
        left: 20px;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body><div>Find: <input type="text" id="typeahead" /> 
<button id= "clearButton">Clear</button></div><br />
<div> <p id= "WordCounter">10 words in total</p></div>
  <select size="7" id="selection">
    </select>

相关文章：