自动填充功能无法正常工作

时间:2014-04-07 19:14:21

标签: javascript php jquery css

所以我正在使用这个功能,我已经使用jQuery Autocomplete从数据库中获取数据,并将其显示在搜索框中。 一切都很好,但是当我将鼠标悬停在结果上时(在下拉列表中,它会显示与结果相关的数字)。 相反,它应该显示结果名称。 这附有一张图片: - Test Image

在上图中,它显示 Apple Mac 的数字 4 ,而当我时,它应显示 Apple Mac 指向/悬停。 我该如何解决这个问题?

jQuery代码: -

<script>
  $(function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#birds" ).autocomplete({
      source: "search.php",
      minLength: 2,
      select: function( event, ui ) {


        log( ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.label :
          "Nothing selected, input was " + this.actor );
         window.location.href = './products/' + ui.item.value;
         //window.location.href = 'product_display.php?id=' + ui.item.value;
       // document.testForm.action = "pretravel.php?id="+ui.item.value;
        //document.testForm.submit();
      }
    });
  });



  </script>

的search.php

<?php
include 'dbconnector.php';

// Sanitise GET var
if(isset($_GET['term']))
{
$term = mysql_real_escape_string($_GET['term']);
// Add WHERE clause
//$term="Apple";
$query = "SELECT `productid`, `productname` FROM `products` WHERE `productname` LIKE '%".$term."%' ORDER BY `productid`";


$result = mysql_query($query,$db) or die (mysql_error($db));
$id=0;
$return=array();
while($row = mysql_fetch_array($result)){

    //array_push($return,array('label'=>$row['productid'],'actor'=>$row['productname']));
    array_push($return,array('value'=>$row['productid'],'label'=>$row['productname']));
    //array_push($return,array('actor'=>$row['productname'],'label'=>$row['productid']));

}

header('Content-type: application/json');
echo json_encode($return);
//var_dump($return);

exit(); // AJAX call, we don't want anything carrying on here
}
else
{
    header('Location:index');
}

?>

3 个答案:

答案 0 :(得分:1)

请勿将启用自动填充功能的文本输入与选择输入混淆。文本输入只能包含单个值,即文本值。因此,不要将id传回javascript,只需传递每个结果的名称,并将其用作标签和值。

 array_push($return,array('label'=>$row['productname']));

这当然会使您的工作流程的其他部分变得更加困难,例如您的重定向基于产品ID而不是产品名称,因此我建议继续返回productid,而不是作为价值。

 array_push($return,array('productid'=>$row['productid'],'label'=>$row['productname']));

现在您可以在活动中访问productid。

window.location.href = './products/' + ui.item.productid;

答案 1 :(得分:1)

自动完成功能不起作用,因为您要从通话中返回ID和值。一种选择是仅返回值。或者,如果您同时需要id和值,则需要查看覆盖select例程以自动完成。在jQuery网站上,您可以在此处查看示例:http://jqueryui.com/autocomplete/#custom-data。相关代码是:

$( "#project" ).autocomplete({
  minLength: 0,
  source: projects,
  focus: function( event, ui ) {
    $( "#project" ).val( ui.item.label );
    return false;
  },
  select: function( event, ui ) {
    $( "#project" ).val( ui.item.label );
    $( "#project-id" ).val( ui.item.value );
    $( "#project-description" ).html( ui.item.desc );
    $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

    return false;
  }
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};

希望有所帮助!

答案 2 :(得分:0)

只返回产品名称。将其作为标签和值

array_push($返回,阵列(&#39;值&#39; =&GT; $行[&#39;产品名&#39],&#39;标签&#39; =&GT; $行[&# 39;产品名&#39;]));