Ajaxのオートコンプリート（又は選択候補）コマンドライン補完をシェルに類似したTAB完了/オートフィル付き？

StackOverflow https://stackoverflow.com/questions/1837555

質問

私はAJAXのオートコンプリート/オートサジェスト機能を実装しています、と私は、ユーザーが入力した内容に類似している通常のショーの提案をしたいんが、私は、ユーザーが入力して保存するために、部分的な補完をやらせてみたいだけではなく、 。

だから、私の辞書はそれでこれらの値を持っている想像：「青りんご」、「グリーン梨」、「緑の果実」、「青空」、「青い水」、「青いウェイク」

「G」で、ユーザーがタイプした場合、

、提案は「青りんご」、「グリーン梨」、「緑の果実」であるべき、と私は、「ユーザーが自分のクエリを更新するために、TABや何かをヒットさせたいのですが緑は青りんご 『『と、彼らはに完成取得したい』」、そして、彼らは入力することができ』ています。

私は、Linuxのシェルコマンドラインの完了後にこれをモデル化しようとしています。

あなたはこれを行い制御/スクリプトをお勧めしますか？または既存のコントロールの修正/カスタマイズ？

役に立ちましたか？

解決

オートコンプリート機能のこの特定のタイプは、通常、それらが希望試合を選択するためのドロップダウンUIを提供するため、（... jQueryの、Scriptyのために）人気の自動補完プラグインではサポートされていません。

それでは、私たちはすぐに解決策を持っていないと仮定してみましょう。ブー浩。どのようにハードそれはそれをコーディングすることができますか？

// 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の - プラグイン/ jqueryの - プラグインオートコンプリート/ に。 単純にドロップダウンボックスを非表示にCSSを使用し、上のタブオートコンプリート機能を残しています。

私は

...あなた自身のためのjQueryプラグインを作成するために、単純なことだと思います

の線に沿って       タブのキーのために聞きます       タブキーを押すと、トリガータブ：input.autotabを押します。

   $(document).keydown(function(e){ if (e.keyCode = (tab-key?)){
       $('input.autotab').trigger('tab:press');
   });

バインドinput.autotabのタブ：プレスイベント（各ループで...フォーカスの場合==真など）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>

ここで見つけることがもっと http://docs.jquery.com/Plugins/Autocomplete

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top