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的Javascript函数。此功能将附加到搜索表单

    <script>

    $().ready(function() {

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

        width: 260,

        matchContains: true,

        selectFirst: false

});

 });

    </script>

如果您在网站上进行快速搜索，您将会看到我在说什么。如果有人有任何想法会很棒。顺便说一句，我已经尝试过改变一点但仍然无法正常工作。我对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);
?>

再次感谢

Answer 1

基本上，php文件应该返回一个JSON字符串（DATA ONLY），并且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); });

Jquery自动填充搜索框结果以HTML格式显示

1 个答案: