JQuery UIについてオートコンプリートとテキストボックスの提案！

Question

テキストボックスのオートコンプリートコンポーネントを実装しようとしています。私はjqueryのUIオートコンプリートプラグインを使用して、それはちょっと自動ドロップよりもドロップダウンリストのように動作します。

私はそれはいくつかのオプションの下に示して、ユーザーが書いているときと同じように動作例を見、だけでなく、それがどのように見えるので、「HTMLプレースホルダ」として選択するための第一選択肢の補数を書きました：

| "IM検索のサムネイル" スタックオーバーフローのヒンジ |

（私はあなたのアイデアを得る知っている）

私は本当に自動車のように、彼が書いているもので、ユーザをガイドする、と私は（JSONか何かで）起動項目のいずれかを選択するために彼を強制する必要があります彼が書いていることを「完了」する。私はそのプラグインに "selectFirst"属性のようなものが必要です。それのようなものはないようです。だから、あなたたちは何を提案しますか？

私はプラグインの "オープン"イベントにいくつかのコードを書いていると思っていましたが、どこから始めたらいいですか。おそらくそこには既に何かがあるので、私はこの一週間のように浪費する必要はありません。

私のコードは、すでに次のようになります。

$(".destination").autocomplete({ 
      minLength: 2, 
      autoFocus: true, open: function(event, ui){ /* DO THE MAGIC HERE */ }, 
      source: function (request, response) { 
       $.ajax({ 
        url: "@Url.Action("SearchDestinations", "Json")", type: "POST", dataType: "json", 
        data: { term: request.term }, 
        success: function (data) { 
         response($.map(data, function(item){ 
          return { label: item.Description, value: item.Description, id: item.Id }; 
         })); 
        } 
       }) 
      } 
     }); 

事前に感謝します（これはあまりにもnoobishであれば申し訳ありません）。！

Answer 1

これは、自動補完のテキストボックスではあまり一般的ではない動作で、ユーザーが選択を行う理由を詳しく説明していません（最初の選択肢が常に最善であることをどのように知っていますか？

このような機能を設定する場合は、ユーザーの入力後にデフォルトで入力したテキストのスタイルを変更して、ユーザーが入力した内容と自分の内容がはっきりわかるようにします（Googleインスタント検索では、検索結果に非常に薄い色のテキストを使用して表示されますが、Googleは検索の誘導を試みるのではなく、インスタント検索の結果を表示していることにも注意してください）。ユーザーは、入力したテキストの後ろに追加のテキストが表示されるのを見て驚くかもしれませんし、テキストボックスに目を向けているので、以下のようなオプションを考慮しないで入力として受け入れる傾向があります。ユーザテストを行う際には、両方の点を考慮に入れたいと思うでしょう。言われて、あなたはこれに似たセレクタで自動補完ドロップダウンリストの最初の選択可能な項目のテキストにアクセスできることを

：

$(".ui-autocomplete li:first a").text(); 

次に、一般的なJavaScriptのSUBSTRを使用して（ ）メソッドを使用すると、ユーザーが入力した内容の後にある選択範囲からテキストを取得し、ユーザーの入力後にテキストボックスに表示することができます。