Jquery UI自动完成 - 选择值

时间:2012-05-10 22:10:41

标签: jquery jquery-ui

我有一些PHP和JQuery创建了自动完成表单:

<?
mysql_select_db($database_database_connection, $database_connection);
$query = "SELECT * FROM Device_tbl";
$result=mysql_query($query, $database_connection) or die(mysql_error());
$findrow = array();
while($row = mysql_fetch_assoc($result)){
    $manufac = $row['Manufacturer'];
    $mod = $row['Model'];
    $string = $manufac.' '.$mod;
    $findrow[] = $string;
}

?>

<script type="text/javascript">
$(document).ready(function() {
  $("#search_input").watermark("Begin Typing to Search");

  var availableTags = <? echo json_encode($findrow);?>;
  $( "#search_input" ).autocomplete({
            source: availableTags
            });


    $("#search_input").bind("autocompleteselect", function() {
        var search_input = $(this).val();
        if (search_input =='') search_input ='*';
        var dataString = 'keyword='+search_input;

        if (search_input.length > 2 || search_input=='*') {
           $.ajax({
                type: "GET",
                url: "core/functions/searchdata.php",
                data: dataString,
                success: function(server_response) {
                    $('#searchresultdata').empty();
                    $('#searchresultdata').append(server_response);
                    $('span#category_title').html(search_input);
                }
            });
        }

        return false;
    });
    $("#search_input").trigger('keyup');
});
</script>

searchdata.php

mysql_select_db($database_database_connection, $database_connection);
$query = "SELECT Image, Manufacturer, Model FROM Device_tbl WHERE Manufacturer LIKE '%$keyword%' OR Model LIKE '%$keyword%'";
if ($keyword=='*') $query = "SELECT Image, Manufacturer, Model FROM Device_tbl";
$result=mysql_query($query, $database_connection) or die(mysql_error());

if($result){
    if(mysql_affected_rows($database_connection)!=0){
          while($row = mysql_fetch_object($result)){
?>
     <div class="hold-cont">
        <div class="holder">
            <div class="image-hold" >
                <img class="image-icon" src="<? echo $deviceimg.($row->Image); ?>"/>
</div>
        </div>
        <div class="device-name devicename-txt"><? echo($row->Manufacturer. ' ' .$row->Model);  ?></div>
    </div>
     <?
    }
    }else {
        echo 'No Results for :"'.$_GET['keyword'].'"';
    }

}
else {
    echo 'Parameter Missing';

自动完成部分工作正常,但是我无法工作的是在所选值上运行.ajax。例如,如果我开始输入“Apple iMac”并且只能达到“Ap”。建议是Apple iMac,但是当我点击建议时,它会在“Ap”上运行查询 - 也就是说,它只对输入的内容运行查询,而不是点击的内容。

当用户点击建议或点击进入时,我是如何做到这一点的?

1 个答案:

答案 0 :(得分:1)

$( "#search_input" ).autocomplete({
    source: availableTags,
    select: function(event, ui) {
        sendSelected(ui.item.value);
        }
    });

function sendSelected(_val){
    var search_input = _val;
    if (search_input =='') search_input ='*';
    var dataString = 'keyword='+search_input;

    if (search_input.length > 2 || search_input=='*') {
       $.ajax({
            type: "GET",
            url: "core/functions/searchdata.php",
            data: dataString,
            success: function(server_response) {
                $('#searchresultdata').empty();
                $('#searchresultdata').append(server_response);
                $('span#category_title').html(search_input);
            }
        });
    }
}

searchdata.php:

$splitKeyword = explode(" ", $keyword);
if(sizeof($splitKeyword)==3){
    $splitKeyword[1] = $splitKeyword[1]." ".$splitKeyword[2];
 }
$query = "SELECT Image, Manufacturer, Model FROM Device_tbl WHERE Manufacturer LIKE '%".$splitKeyword[0]."%' OR Model LIKE '%".$splitKeyword[1]."%'";