0

私のサイトの jquery autocomplete プラグインに少し問題があります。登録ユーザーのユーザー名をデータベースに対して照会する検索ボックスがあります。これはうまく機能しますが、1つの側面があります。ユーザーがユーザーをクリックしてクエリの検索を終了すると、入力テキスト フィールドの結果が HTML 形式で表示されます。

入力ボックスで選択したユーザー名のみを表示するか、クエリ ページに直接リダイレクトするだけです。

これが紛らわしいと思われる場合は、これがサイトであり、登録せずに検索できます... http://www.socialpurge.com/search_query.php

以下は、データベースに対する検索用に追加されたコードである php の一部です。

<?php

$input = $_POST['search'];

include($_SERVER['DOCUMENT_ROOT'] . "/scripts/members_connect.php");

$c_search = mysql_query("SELECT * FROM members WHERE fname LIKE '%$input%' or fullname LIKE '%$input%'");

while($rows = mysql_fetch_assoc($c_search)) {


$data = $rows['fullname'];

$fname = $rows['fname'];

$id = $rows['ID'];
    ///////  Mechanism to Display Pic. See if they have uploaded a pic or not  //////////////////////////

$check_pic = "/members/$id/default.jpg";

$user_pic = print "<img src=\"$check_pic\" width=\"35px\" />"; // forces picture to be 100px wide and no more

print "<a href='profile.php?=&fname=" . $fname ."&user=" . $id . "'>" . $data . "</a>\n";

}

    mysql_close($con);

    ?>

以下は、上記のphpを呼び出しているJavascript関数です。この機能は検索フォームに追加されます

    <script>

    $().ready(function() {

    $("#search").autocomplete("include/user_search.php", {

        width: 260,

        matchContains: true,

        selectFirst: false

});

 });

    </script>

サイトで簡単に検索すると、私が話していることがわかります。誰かが素晴らしいアイデアを持っているなら。ところで、phpを少し変更しようとしましたが、まだ機能しません。私はJavascriptに少し慣れています。autocomplete.js プラグインのソースを変更しようとしましたが、うまくいきませんでした。

Javascript/Jquery を使用して html タグを削除し、選択および/または onclick イベントがトリガーされた後にテキストを保持する方法はありますか?

私を助けてください

答え

Ofir Baruch の言うとおりでした。使用していた機能を完全に変更する必要がありました。Jquery用の別の関数プラグインを使用していました。私は持っていたJqueryを更新し、jsファイル内にパッケージ化されたネイティブのものを使用しました。それが誰かを助けるならば、これは私がしたことです。

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script> 
    <link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.2.custom.css" /> 

 <script>
$(document).ready(function() {
        $("input#search").autocomplete({
                source: 'include/user_search.php',
                minLength: 1,
                select: function(event, ui) {
                    var item = ui.item.value.replace(/(<([^>]+)>)/ig,"");

                    $('#search').val(item);
                    return false; 
                }
        });
});
</script>

次に、クエリファイルで：

 <?php

$input = $_REQUEST['term'];
include($_SERVER['DOCUMENT_ROOT'] . "/scripts/members_connect.php");
$c_search = mysql_query("SELECT * FROM members WHERE fname LIKE '%$input%' or fullname LIKE '%$input%'");
$data = array();
if ( $c_search && mysql_num_rows($c_search) )
{
while( $row = mysql_fetch_array($c_search, MYSQL_ASSOC) )
{
    $check_pic = "/members/" . $row['ID'] . "/default.jpg";
    $data[] = array(
        'label' => "<img src='/members/" . $row['ID'] . "/default.jpg' width='35px' /><a href='profile.php?=&fname=" . $row['fname'] . "&user=" . $row['ID'] . "'>" . $row['fullname'] . "</a>"
    );
}
}

// jQuery wants JSON data
echo json_encode($data);
flush();
mysql_close($con);
?>

再度、感謝します

4

1 に答える 1

0

基本的に、php ファイルは JSON 文字列 (データのみ) を返す必要があり、jquery スクリプトはその「設計」を処理し、タグなど (img 、a) を追加する必要があります。

とにかく、オートコンプリート jquery UI プラグインにはselectイベントがあります。

select: function(event, ui) { ... }

メニューからアイテムが選択されたときにトリガーされます。ui.item は、選択されたアイテムを参照します。select のデフォルトのアクションは、テキスト フィールドの値を選択した項目の値に置き換えることです。このイベントをキャンセルすると、値が更新されなくなりますが、メニューを閉じることはできなくなります

したがって 、

    $("#search").autocomplete("include/user_search.php", {

        width: 260,
        matchContains: true,
        selectFirst: false,
        select: function(event, ui) { 


           //use ui.item to manipulate the HTML code and to replace the field's
           //value only with the user's name.

         }

});

編集：

前述のように、php ファイルは JSON 形式のデータを返す必要があります。array variable次の構造体でan を使用します。

$results = array(
0 => array('id' => $ROW['id'] , 'name' => $ROW['name'] , 'fullname' => $ROW['full_name']),
....
....
);

php関数を使用してください：json_encodeそしてechoそれ。

jquery で、次のようにします。

function(data) {
    $.each(data.items, function(i,item){
      //use: item.id , item.name , item.full_name
      $("#autocomplete-list").append("<img src='dir/to/image/"+item.id+".jpg>"+item.name);
    });
于 2012-08-19T13:34:47.937 に答える