使用最新的jquery自动完成ui

时间:2017-04-22 14:11:39

标签: javascript php jquery jquery-ui autocomplete

我一直在尝试将我的autosuggest脚本从jquery autocomplete 1.1转换为最新的自动完成ui,但似乎发现很难做到。如果有人能提供帮助,我会很高兴。 PHP代码:

  include( "dbconnect.php" );
$term = trim(strip_tags(strtolower($_GET['term'])));
if ( !$term )
{
}
else
{
    $query = "SELECT DISTINCT city as cityname,id as cityid FROM city where LCASE(city) like '%".$term."%'";
    $results = mysql_query( $query );
while ($row = mysql_fetch_array($results,MYSQL_ASSOC))
    {
    $row_set[]=(int)$row['cityid'];
    $row_set[]=htmlentities(stripslashes($row['cityname']));

    }

}
echo json_encode($row_set);//format the array into json data

和此:

include( "dbconnect.php" );
$term = trim(strip_tags(strtolower($_GET['term'])));
$city = intval( $_GET['city_val'] );

if ( !$term )
{
}
else
{
    $query = "SELECT DISTINCT locality as localityname,id as localityid FROM locality where cityid='{$city}' and LCASE(locality) like '%".$term."%'";
    $results = mysql_query( $query );
    while ($row = mysql_fetch_array($results,MYSQL_ASSOC))
    {

    $row_set[]=htmlentities(stripslashes($row['localityname']));
    $row_set[]=(int)$row['localityid'];


    }

}
echo json_encode($row_set);//format the array into json data

和js:

// Set default values to -1 and disable locality
    $("#city").focus();
    $("#city_val").val(-1);
    $("#locality").val("Select City First");
    $("#locality_val").val(-1);
    document.getElementById('locality').disabled =true;



    // start city part
$( "#city" ).autocomplete({
  source: 'new_suggestion.php',
  minLength: 2,

});

$("#city").result(function(event,data,formatted)
{
    //$("#city_val").val(data[1]);

    if ( document.getElementById('city').value == "" )
            {
            $("#city").val("National Search");
            $("#city_val").val(-1);
            $("#locality").val("Select City First");
            $("#locality_val").val(-1);
            document.getElementById('locality').disabled =true;
            var ct="-1";
            }
    else
            {
            $("#city_val").val(data[1]);

            document.getElementById('locality').disabled =false;
            $("#locality_val").val(-1);
            $("#locality").val("");
            var ct=data[1]
            }

// if city value found start locality here
if (ct != -1)
{
// locality starts //
$("#locality").val("");
$("#locality_val").val(-1);

$( "#locality" ).autocomplete({
  source: "new_suggestion2.php?city_val="+ct,
  minLength: 2,
});

$("#locality").result(function(event, data, formatted)
    {

        if (document.getElementById('locality') == "" )
        {
        $("#locality_val").val(-1);
        $("#locality").val("true");
        }
        else
        {
        $("#locality_val").val(data[1]);
        }
    });
// locality ends //
} // end of if ct

1 个答案:

答案 0 :(得分:0)

$('#my-search-input').autocomplete({
minLength: 1,
delay: 1000,
source: function(request, response) {
  $.get('/api/get/autocomplete/', {
    search: encodeURIComponent(request.term),
    time: $.now()
  },
  function(data) {        
      response(decodeURIComponent(dat));
  }, 'json');
});

尝试在自动完成时使用ajax时,必须使用请求和响应参数。见上文。