Jquery 自动完成搜索框结果以 HTML 格式显示

Question

我的网站上的 jquery autocoomplete 插件有点问题。我有一个搜索框，可以针对数据库查询注册用户的用户名。这很好用，但是一方面。当用户点击用户完成对查询的搜索时，输入文本字段中的结果以 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.ini 的 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 文件中的原生 Jquery。如果它对任何人有帮助，这就是我所做的。

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

再次感谢

Answer 1

基本上，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：

$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);
    });