入力フォーム用のJqueryオートコンプリート、Textpatternカテゴリリストをソースとして使用

Question

私はTextpattern CMSを使用してディスカッションサイトを構築しています.XHTMLとCSS、Textpatternのテンプレート言語はPHPとJavascript私の狡猾さをはるかに超えています。

新しいトピックを作成するための入力フォームでは、5,000を超えるオプションのリストからカテゴリを選択する必要があります。 HTML select-type input要素を使用することは非常に扱いにくいですが、機能します。私は必要なオプションのvalue適切なデータベースフィールドに渡し、表示できるカテゴリからのユーザ入力と表示マッチやオートコンプリートを読み込みますtext型入力要素にJavascriptの魔法のいくつかの種類を使用したいと思います。

私はjquery用のいくつかの自動補完プラグインを見ましたが、指示はJavascriptの仕組みを理解していることを前提としています。

上記のとおり、カテゴリリストをselectタイプinputエレメントとして生成するのは簡単ですが、CSSを使用してそのエレメントを非表示にすることができます。 text型の入力要素でオートコンプリートメカニズムを使って選択リストの入力を制御することはできますか？どうすればいい？

Answer 1

あなたはURLからデータを取るためにオートコンプリートを設定することができますので、私はこれがTextpatternはとの夫婦気の利いた方法で使用されて見ることができます。

オートコンプリートは、このようなルックスを使用していることを、アレイ形式：

["example_one", "example_two", ... ] 

あなたは5000個の+の要素を持っているので、あなたは、単にその形式を使用してそれらを一覧表示ページを作成することがあります：

Page Autocomplete: 
[ 
    <txp:article_custom form="array_form" ... /> 
] 

Form array_form: 
"<txp:title />", 

選択したフィールドにすべてのアイテムを含める代わりにこのページを使用するには、次のようにオートコンプリートを設定します。

$("#example").autocomplete("<txp:link_to_home />Autocomplete"); 

キャッシングプラグインを使用して読み込みを高速化できます。

さらに高速化するために、完全なリストを使用する代わりにcustom display pageのTextpattern検索機能を使用できます。新しい文字が入力/削除されるたびに、オートコンプリートが新しい検索文字列で再ロードされるようにオートコンプリートを設定する方法があるかもしれません。

Answer 2

EDIT：hiddenフィールドに

をoption.value置くために更新しましたはい、それは可能です。たとえば、次のHTMLコードがある場合：

<input type="text" id="myTextBoxId"></input> 
<!-- added hidden field to store selection option value --> 
<input type="hidden" id="myHiddenField" name="selectedCategory"></input> 
<select id="mySelectId" style="display: none"> 
    <option>Category 1</option> 
    <option>Category 2</option> 
    <option>...</option> 
</select> 

をあなたは配列にこのデータを置くために、次のjQueryコードを使用することができます。

var categories = $.map($("#mySelectId option"), function(e, i) 
{ 
    return e; // Updated, return the full option instead its text 
}); 

そして最後に、あなたはthis oneのようなオートコンプリートのプラグインを使用することができます：

$("#myTextBoxId").autocomplete(categories, 
{ 
    formatItem : function(item) { return item.text; } // Added 
}); 

は、あなたが（autoFillのとmustMatchのような）を使用することができますどのようなoptions見るためにautocomplete plugin demo pageを確認してください。

あなたがしなければならないのは、あなたのHTMLヘッダー（jqueryのjsファイル、オートコンプリートのCSS & JS、あなたのページのコード）でこれを入れて：[OK]を、それはわずか数行のコードだ

<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" /> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.autocomplete.js"> 
</script> 
<script type="text/javascript"> 
    $(function() 
    { 
     // Updated script 
     var categories = $.map($("#mySelectId option"), 
      function(e, i) { return e; }); 
     $("#myTextBoxId").autocomplete(categories, 
     { 
      formatItem : function(item) { return item.text; } 
     }); 
     // Added to fill hidden field with option value 
     $("#myTextBoxId").result(function(event, item, formatted) 
     { 
      $("#myHiddenField").val(item.value); 
     } 
    }); 
</script> 

が、私実際には "配列を選択する"ものが好きではありません。可能であれば、ユーザーの入力と一致するカテゴリのリストを返すページを作成する必要があります（デモページで例を確認してください。不幸にも、Textpatternではあまり役に立ちません）。

もちろん、私はテストしませんでした。質問があればコメントを入力してください。 編集：私はではなく、私のselectで5Kの項目で、テストをDID;）