2016-03-26 13 views
0

私はウィジェットボックスの上にある行(「合計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)); 
 
\t \t 
 
     } 
 
\t 
 
    }); 
 
    
 
    cb(matches); 
 
    }(q, cb, function(res){return res})); 
 

 

 
}; 
 
    
 
var states = [ 
 
    "a", 
 
    "able", 
 
    "about", 
 
    "account", 
 
    "acid", 
 
    "across", 
 
    "act", 
 
    "addition", 
 
    "adjustment", 
 
    "advertisement", 
 
]; 
 
    
 
    \t $.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(); 
 
\t 
 
\t 
 
\t 
 
    $.map(results, function(value, index) { 
 
\t \t 
 
\t \t 
 
    $("#selection").append($("<option/>", { 
 
\t \t 
 
\t 
 
     "class":"results" + index, 
 
\t 
 
     "html":value 
 
\t 
 
\t \t 
 
\t 
 
\t \t 
 
    })) 
 
    }) 
 
    }) 
 
}); 
 

 
\t 
 
\t \t $("#clearButton").click(results); 
 

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

 
\t }
<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>

答えて

0

あなたのコードが間違っ閉鎖を含んでいます。それでなければなりません:

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)); 
 
\t \t 
 
     } 
 
\t 
 
    }); 
 
    
 
    cb(matches); 
 
    }(q, cb, function(res){return res})); 
 

 

 
}; 
 
    
 
var states = [ 
 
    "a", 
 
    "able", 
 
    "about", 
 
    "account", 
 
    "acid", 
 
    "across", 
 
    "act", 
 
    "addition", 
 
    "adjustment", 
 
    "advertisement", 
 
]; 
 
    
 
    \t $.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(); 
 
\t 
 
\t 
 
\t 
 
    $.map(results, function(value, index) { 
 
\t \t 
 
\t \t 
 
    $("#selection").append($("<option/>", { 
 
\t \t 
 
\t 
 
     "class":"results" + index, 
 
\t 
 
     "html":value 
 
\t 
 
\t \t 
 
\t 
 
\t \t 
 
    })) 
 
    }) 
 
    }) 
 
}); 
 

 
\t 
 
\t \t $("#clearButton").click(results);
html { 
 
     background-color: #C0C0C0; 
 
    } 
 
    div{ 
 
     width:400px; 
 
     margin:0px auto; 
 
     position: absolute; 
 
     left: 20px; 
 
    } 
 
\t select{ 
 
\t \t width:400px; 
 
     margin:40px auto; 
 
     position: absolute; 
 
     left: 20px; 
 

 
\t }
<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>

+0

はい、それが機能するようになりましたでしょう。ありがとう。私のクリアボタンで何が間違っているのだろうか?私はそれを修正できませんでした。結果をクリアし、ウィジェットボックスを最初のステップに更新する必要があります。私はすべての言葉を再び示すことを意味する。私がどこが間違っているかわからない! – Alex

+0

あなたのクリックでコールバック機能を提供する必要があります。あなたの場合、結果は定義されていません。 –

関連する問題