Jquery Autocomplete search box results show in HTML format

Question

I am having a little issue with the jquery autocoomplete plugin on my site. I have a search box that queries against a database for the usernames of registered users. This works great but one aspect. When the user clicks on the user to finish the search on the query, the results in the input text field show in HTML form which is and .

I want to only show the username they picked in the input box or just directly redirect them straight to the query page.

if this sounds confusing, this is the site and you can search without registering... http://www.socialpurge.com/search_query.php

Below is some of the php which is the appended code for the search against the database

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

    ?>

Below is the Javascript function that is calling the above php. This function is appended to the search form

    <script>

    $().ready(function() {

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

        width: 260,

        matchContains: true,

        selectFirst: false

});

 });

    </script>

If you do a quick search on the site, you will see what I am talking about. If anyone has any ideas that would be great. BTW I have tried changing the php a bit and still doesn't work. I am a little familiar with Javascript. I tried changing the source of the autocomplete.js plugin but that didn't work.

Is there a way to use Javascript/Jquery to remove the html tags and just keep text after selection and/or onclick event is triggered?

Please help me

Answer

Ofir Baruch was right, I just had to completely change the function I was using. I was using a seperate function plugin for Jquery. I updated Jquery I had and used the native one that was packaged inside the js file. This is what I did if it helps anyone.

<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>

Then in my query file:

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

Thanks again

Answer 1

Basicly , the php file should return a JSON string (DATA ONLY), and the jquery script should handle the "design" of it , appending tags and such (img , a).

Anyway , the auto-complete jquery UI plugin has a select event.

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

Triggered when an item is selected from the menu; ui.item refers to the selected item. The default action of select is to replace the text field's value with the value of the selected item. Canceling this event prevents the value from being updated, but does not prevent the menu from closing

Therefore ,

    $("#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.

         }

});

EDIT:

Your php file should return a JSON formated data , as mentioned. Use an array variable in the next structre:

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

use the php function: json_encode and echo it.

In your jquery , do something like:

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