2

物事をシンプルに保つために、jquery オートコンプリートが機能しています。同じ入力フィールドで配列から複数の行を結合/表示する最善の方法は何ですか。

私のphpは次のようになります

$return_arr = array();

/* If connection to database, run sql statement. */
if ($conn)
{
    $fetch = mysql_query("SELECT * FROM alltickets where name like '%" . mysql_real_escape_string($_GET['term']) . "%'");

    /* Retrieve and store in array the results of the query.*/
    while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
        $row_array['id'] = $row['id'];
        $row_array['value'] = $row['name'];
        $row_array['thedate'] = $row['date'];

        array_push($return_arr,$row_array);
    }
}

/* Free connection resources. */
mysql_close($conn);

/* Toss back results as json encoded array. */
echo json_encode($return_arr);

私のhtmlページは次のようになります

>Please enter what you are looking for</p>

<p class="ui-widget">

<label for="event">Please start entering your event </label>

<input type="text" id="event"  name="event" /></p>

<input type="hidden" id="mysqlid" name="mysqlid" />


<p><input type="submit" name="submitBtn" value="Submit" /></p>

</fieldset>
</form>

<script type="text/javascript">
$(function() {

            $("#event").autocomplete({
                source: "autocomp.php",
                minLength: 2,
                select: function(event, ui) {
                    $('#mysqlid').val(ui.item.id);
                }
            });

        });
</script>

イベントという名前のテキスト入力フィールドに「名前」の直後に「日付」を表示する最も効果的な方法は何ですか

今検索すると、「cam」の結果は次のようになります

camera

結果を次のようにしたい

camera 17/09/2013

これを行うにはいくつかの方法があることがわかりますが、最善の方法は何ですか? ありがとうございました

4

1 に答える 1

0

最も簡単な方法は、おそらくselectイベントハンドラーでそれを行うことです。イベントのデフォルトのアクションも防止することを忘れないでください。

$("#event").autocomplete({
    source: "autocomp.php",
    minLength: 2,
    select: function(event, ui) {
        event.preventDefault();
        this.value = ui.item.value + " " + ui.item.thedate;

        $('#mysqlid').val(ui.item.id);
    }
});

例： http： //jsfiddle.net/J5rVP/33/

提案のリスト内に日付を表​​示する場合は、いくつかのオプションがあります。

  1. 表示valueする文字列全体をプロパティに入力します（サーバーで作業を行います）
  2. サーバーから取得した応答を操作して、valueプロパティを正しく入力します
  3. 関数をオーバーライドして_renderItem、アイテムを希望どおりに表示します。

あなたの場合、＃3がおそらく最善の方法のように思われるので、次のようにします。

$("#event").autocomplete({
    source: "autocomp.php",
    select: function (event, ui) {
        event.preventDefault();
        this.value = ui.item.value + " " + ui.item.thedate;
    }
}).data("autocomplete")._renderItem = function (ul, item) {
    return $("<li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + " " + item.thedate + "</a>")
        .appendTo(ul);
};

例： http： //jsfiddle.net/J5rVP/34/

于 2013-01-13T14:05:23.880 に答える