ユーザーが入力するとすぐに単語のリストを常に更新する入力を作成する

リストから単語を探すために入力をしようとしています。命令は、検索入力フィールドにユーザーのクエリが含まれるべきであることを示します。クエリが空白の場合、リストボックスは単語全体を表示する必要があり、クエリが変更されるたびにリストボックスが更新され、クエリテキストを含むすべての単語が表示されます（単語がいくつ見つかったかが示されます）。ユーザーが入力すると、リストボックスは常に更新されます。以下は私が思いついたものです。私は単語のリストと入力（クエリを使用して）をリンクできませんでした。私の "クリア"ボトムも機能しません。どのようにそれを作るための任意の提案？ユーザーが入力するとすぐに単語のリストを常に更新する入力を作成する

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

出典

2016-03-24 Alex

ご質問は、研究の任意の並べ替えを発現しない...何であるか私たちを表示しますあなたがそれが動作すると期待どおりに動作していない..試してきた – Rayon

あなたは、このようなドロップダウン選択を意味するか：

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

出典

2016-03-24 03:23:28 John

いいえ。別の箱に入れる。私が上記のように。 – Alex

あなたは "検索" するinputタグのidを設定するようになったため。以下は入力フィールドをクリアします。他のすべてのために

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

ここにあなたが軌道に乗る必要がありますjsFiddle

です。

出典

2016-03-24 03:46:20

はlabel 、"Find"に設定input要素で一致の数を表示するための要素をid属性が追加されました。

.val().empty()valueinputの要素を置換する。

イベントを使用して、各ユーザーの入力時にselectoption要素を更新できます。既存のjsの部分を$.each()の部分に呼び出す関数を作成します。単語を一致させるためにString.prototype.split()を、一致をフィルタリングするために$.grep()を、$.map()を使用して、htmlをlabel要素に更新する関数に一致する単語の配列を渡します。

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

出典

2016-03-24 04:31:31 guest271314

それは素晴らしいです！しかし、私はおそらく検索タスクを行う外部のjsファイルがあることを認識していなかったので、私はこのページの主な質問の下でアップロードしたものを自分自身が理解するための、より簡単で代替的な方法を探しました。しかし、私が間違っているところはまだ分かりません！ – Alex

@Alex stacksnippetsで 'js'は期待した結果を返しますか？検索アルゴリズムは、予想される出力結果によって異なる場合があります。 _ "なので、私はちょっと調べました" _ "簡単"という意味は何ですか？ http://stackoverflow.com/a/29324737/も参照してください。 – guest271314

検索するためのコードを含んで外部JSファイルがあるので、私は実際には、別の方法を思いつきました。

VAR辞書=関数（ワード）{

/** 
* 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"を更新しないのか理解できませんでした。guest271314

<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= \t [ 
 
    "a", 
 
    "able", 
 
    "about", 
 
    "account", 
 
    "acid", 
 
    "across", 
 
    "act", 
 
    "addition", 
 
    "adjustment", 
 
    "advertisement", 
 
    
 
]; 
 

 

 

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

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

 
} 
 

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

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

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

 
</script>

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

 
\t }

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

出典

2016-03-25 17:31:41 Alex

私はあなただけで私を示唆したものを使用。追加したい2つの点を除いて動作します。まず、クリアボタンを追加して、入力にあるものをすべて消去し、ウィジェット内の単語のリストをリセット（すべて元に戻す）のように動作させます。次に、「合計10語」というウィジェットの上の行を、例えば「ab 'を含む2語」に更新しようとしました。なぜ私は動作しなかったかわからない以下のようなものです。

もここ

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

コード：（なぜこれのvar lenが動作しないわからない）

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

 
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"]; 
 

 
    
 
    \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 
 
    $.map(results, function(value, index) { 
 
\t \t 
 
    $("#selection").append($("<option/>", { 
 
\t 
 
     "class":"results" + index, 
 
     "html":value 
 
\t \t 
 
\t 
 
\t \t 
 
    })) 
 
    }) 
 
    }) 
 
}); 
 

 
\t 
 
\t \t $("#clearButton").click(results); 
 
\t \t </script>

<style type="text/css"> 
 

 
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 } 
 

 
</style>

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

 

 
</body> 
 
</html>

出典

2016-03-25 21:07:13 Alex

ユーザーが入力するとすぐに単語のリストを常に更新する入力を作成する

答えて

関連する問題