Question

我有一个产品数据库，我必须在jquery自动完成搜索中显示产品标题。我想将搜索列表显示为链接，以便当用户点击结果时，他将重定向到产品描述页面。我正在使用codeigniter目前它的工作正常并完美地显示搜索结果但我不知道如何在链接中显示它们。检查下面的控制器，型号和查看代码：

我的数据库字段 prod_id, prod_name, prod_title, prod_description

控制器/ product.php

public function searchItems()
{
        $srch = $this->main_model->searchProduct($this->input->get('term', TRUE));
        $status = $srch['status'];
        if ($status == 1)
        {
            $rslt = $srch['rs'];
            for ($i=0; $i < count($rslt); $i++) { 
              $farr[] = $rslt[$i][0];
            }
            echo json_encode($farr);
        }
        else
        {
            $rslt = array('No result found.');
            echo json_encode($rslt);
        }
}

型号代码

public function searchProduct($searchTerm)
{
  $this->db->like('title', $searchTerm, 'both');
  $srchData = $this->db->get('seller_item');
  if ($srchData->num_rows() > 0)
  {
    $rsult = $srchData->result();
    foreach ($rsult as $value)
    {
      $prodName[] = array($value->title);
    }
    return array("status"=>1, "rs"=>$prodName);
  }
  else {
    return array("status"=>0);
  }
}

查看代码

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Autocomplete textbox using jQuery, PHP and MySQL by CodexWorld</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$( "#skills" ).autocomplete({
  source: "http://localhost:8888/store/test/search/?"
});
});
</script>
</head>
<body>

<div class="ui-widget">
<label for="skills">Skills: </label>
<input id="skills">
</div>
</body>
</html>

我想创建这种格式的链接：

http://localhost:8888/store/product/view/8

这样当用户点击特定搜索结果时，用户就可以重定向到详细信息页面。

Answer 1

使用默认提供的_renderItem选项。以下是样本。

$("#project").autocomplete({
    source: "http://localhost:8888/store/test/search/?"
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
    return $( "<li>" )
        .append( '<div><a href="http://localhost:8888/store/product/view/' + item.id + '"></a>' + item.desc + '</div>' )
        .appendTo(ul);
         //Assuming here your item contains product id and description
};

以下是 custom data

的官方文档

我想在这里建议使用相对网址而不是绝对网址，因为生产可能没有localhost，而是会有域名。

Answer 2

您可以为源数组中的每个对象添加url属性，然后在用户选择以下项目时将window.location设置为该URL：

var source = [ { value: "www.foo.com",
             label: "Spencer Kline"
           },
           { value: "www.example.com",
             label: "James Bond"
           },
           ...
         ];

比使用select方法重定向到'value'，如：

$(document).ready(function() {
    $("input#autocomplete").autocomplete({
        source: source,
        select: function( event, ui ) { 
            window.location.href = ui.item.value;
        }
    });
});

如何将jquery自动完成结果显示为链接

2 个答案: