Question

我一直在尝试使用小工具框上方的行（＆＃34;总共10个单词＆＃34;）在用户搜索任何字母/单词时动态更改，但无法成功。该行应更改为例如＆＃34;包含＆＃39; ab＆＃39; ＆＃34;

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

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

谁知道怎么做？

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

所以最后的html将是

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何在单词列表中更新包含搜索框中用户类型的单词/字母数？

1 个答案: