【问题标题】:Integrating image with jQuery AutoComplete将图像与 jQuery AutoComplete 集成
【发布时间】:2014-05-26 22:02:25
【问题描述】:

所以我正在做这个项目,我使用 jQuery 自动完成来显示来自 mysql 数据库的搜索结果。搜索结果是从具有产品图像的数据库中获取的产品名称。 我如何才能显示如下图所示的产品图片?

这是我的 jQuery 自动完成页面:

<script>
$( "#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.productid;
         //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']));
    array_push($return,array('productid'=>$row['productid'],'label'=>$row['productname']));

}

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

?>

【问题讨论】:

    标签: javascript php jquery mysql


    【解决方案1】:

    您想使用一个名为 _renderItem 的方法。

    这是一个使用中的小演示:http://jsbin.com/cunuxaqe/2/edit

    【讨论】:

    • 你能解释一下吗?
    • 我已根据需要编辑了您的代码,但出现此错误。 TypeError: $products.data(...) is undefined 你能告诉我,可能的原因是什么?
    • 我不能。不是没有至少看到有问题的代码。从这里尝试和调试的事情太多了。
    猜你喜欢
    • 2022-11-19
    • 2015-01-09
    • 2011-02-05
    • 2015-04-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-20
    • 1970-01-01
    相关资源
    最近更新 更多