单击搜索框中的向下箭头显示html数据而不是搜索找到的值

Question

我正在使用搜索框，当我们输入字符时，它从数据库中获取数据并在文本框下方显示找到的数据，如下拉列表。为此我使用了bootstap.Below是我的代码，

$('input.typeahead').typeahead({
            name: 'typeahead',
            remote:'search.php?key=%QUERY',
            limit : 10
        });

search.php代码：

<?php
$key=$_GET['key'];
        //$array = array();
        $con=mysql_connect("localhost","root","");
        $db=mysql_select_db("factlydb",$con);
        $query=mysql_query("select * from biodata where FIRST_NAME LIKE '%{$key}%' OR LAST_NAME LIKE '%{$key}%' OR CONSTITUENCY LIKE '%{$key}%'");
        while($row=mysql_fetch_assoc($query))
        {
            $ID=$row['ID'];
$array[] = "<span id='$ID'>".$row['FIRST_NAME']." ".$row['LAST_NAME']."</span>";
        }
        echo json_encode($array);

    ?>

它正常工作以显示搜索找到的值，但当我使用向下箭头时，它显示html数据，如<span id='1'>Sachin Tendulkar</span>，而不是显示Sachin Tendulkar。如果我删除span其工作正常但是，当点击该名称时，我需要调用ajax并将id作为参数发送到php文件，当点击键盘上的输入也不起作用但click事件正在工作。我尝试过不同的方式。任何人都可以帮助我，谢谢。