私は AJAX オートコンプリート/オートサジェスト機能を実装しています。ユーザーが入力した内容に似た通常の提案を表示したいだけでなく、ユーザーが入力を節約するために部分的な補完を実行できるようにしたいと考えています。
では、私の辞書に次のような値が含まれていると想像してください。
ユーザーが「g」と入力した場合、候補は「青リンゴ」、「青ナシ」、「緑の果物」である必要があり、ユーザーが TAB キーなどを押してクエリを「緑」に更新できるようにしたいと考えています。次に、「a」と入力すると、「green apple」が完成します。
Linuxシェルコマンドラインの完了後にこれをモデル化しようとしています。
これを行うコントロール/スクリプトをお勧めできますか? または、既存のコントロールの変更/カスタマイズですか?
この特定のタイプのオートコンプリートは、一般的なオートコンプリート プラグイン (jQuery、Scripty... 用) ではサポートされていません。通常、それらは必要な一致を選択するためのドロップダウン UI を提供するためです。
それでは、すぐに使えるソリューションがないとしましょう。ブーホー。それをコード化するのはどれほど難しいでしょうか。
// takes a text field and an array of strings for autocompletion
function autocomplete(input, data) {
if (input.value.length == input.selectionStart && input.value.length == input.selectionEnd) {
var candidates = []
// filter data to find only strings that start with existing value
for (var i=0; i < data.length; i++) {
if (data[i].indexOf(input.value) == 0 && data[i].length > input.value.length)
candidates.push(data[i])
}
if (candidates.length > 0) {
// some candidates for autocompletion are found
if (candidates.length == 1) input.value = candidates[0]
else input.value = longestInCommon(candidates, input.value.length)
return true
}
}
return false
}
// finds the longest common substring in the given data set.
// takes an array of strings and a starting index
function longestInCommon(candidates, index) {
var i, ch, memo
do {
memo = null
for (i=0; i < candidates.length; i++) {
ch = candidates[i].charAt(index)
if (!ch) break
if (!memo) memo = ch
else if (ch != memo) break
}
} while (i == candidates.length && ++index)
return candidates[0].slice(0, index)
}
ここでテスト ページ— 通常のブラウザで動作するはずです。IE をサポートするには、prototype.js、jQuery などからのイベント リスニングを使用します。
jQueryを使用している場合、優れたプラグインはhttp://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/です。cssを使用してドロップダウンボックスを非表示にし、タブオートコンプリート機能をオンのままにします。
自分でjqueryプラグインを作成するのは簡単だと思います...
タブキーをリッスンする行に沿ってタブキーが押されたら、タブをトリガーします：input.autotabを押します
$(document).keydown(function(e){ if (e.keyCode = (tab-key?)){
$('input.autotab').trigger('tab:press');
});
input.autotabのtab：pressイベント（各ループで... focus == trueなどの場合）をjavascript配列ルックアップまたはxhrリクエスト（ajax）にバインドし、その入力の値を返されたデータとして設定します。
$('input.autotab').bind('tab:press', function(){
if (this.hasFocus){
this.disabled = true;
$.get('/autotab', { q: $(this).val() }, function(response){
$(this).val(response);
this.disabled = false;
}, function(){ this.disabled = false; });
}
});
オートサジェストスクリプトで、データベース内で値が複数回一致したら（インデックス付きのforループを使用し、最初の要素が一致するインデックス要素で停止するように）、その時点までの値を返すように記述します。
最も簡単な方法は、jQuery とオートコンプリート プラグインを使用することです。stackoverflow html を見ると、同じものを使用しているようです。ほとんどのブラウザーで非常にうまく機能するようです。プラグインには、特定のニーズに合わせて実装する方法を理解するのに役立つ広範なデモもあります.
プラグインのホームページからの簡単なサンプルを次に示します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
});
</script>
</head>
<body>
API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>