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

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

質問

Textpattern CMS を使用してディスカッションサイトを構築しています-XHTMLとCSSとTextpatternのテンプレート言語ですが、PHPとJavascriptは私のmyさを少し超えています。

新しいトピックを開始する入力フォームで、ユーザーは5,000を超えるオプションのリストからカテゴリを選択する必要があります。 HTMLの select -type input 要素の使用は非常に扱いにくいですが、機能します。何らかの種類のJavascriptマジックを使用して、ユーザー入力を読み取り、使用可能なカテゴリから一致またはオートコンプリートを表示するテキストタイプの入力要素を表示したい、必要なオプションの value を適切なデータベースフィールドに渡します。

jqueryのオートコンプリートプラグインをいくつか見てきましたが、指示はJavascriptの仕組みを理解していることを前提としています。

前述したように、カテゴリリストを select -type input 要素として簡単に生成でき、CSSを使用してその要素を非表示にできます。 text タイプの入力要素でオートコンプリートメカニズムを使用して選択リスト入力を制御することは可能ですか？どうすればいいですか？

役に立ちましたか？

解決

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

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

さらに高速化するために、カスタム表示ページでTextpattern検索機能を使用できます完全なリストを使用する代わりに。オートコンプリートを設定して、新しい文字が入力/削除されるたびに、オートコンプリートに新しい検索文字列が再ロードされるようにする方法があります。

他のヒント

編集：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 のようなオートコンプリートプラグインを使用できます：

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

オートコンプリートプラグインのデモページで、使用できるオプション（autoFillやmustMatchなど）。

あなたがしなければならないのは、これをhtmlヘッダーに入れることです（jquery js、オートコンプリートcss＆amp; js、ページのコード）：

<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 に5,000個のアイテムがありません;）

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