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

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

jquery codeigniter jquery-ui autocomplete

如何将jquery自动完成结果显示为链接,jquery,codeigniter,jquery-ui,autocomplete,Jquery,Codeigniter,Jquery Ui,Autocomplete,我有一个产品数据库，在jquery自动完成搜索时，我必须从中显示产品标题。我想将搜索列表显示为链接，这样当用户单击结果时，他将重定向到产品描述页面。我正在使用codeigniter，目前它工作正常，搜索结果显示完美，但我不知道如何在链接中显示它们。检查以下我的控制器、型号和视图代码：我的数据库字段 prod\u id、prod\u name、prod\u title、prod\u description 控制器/product.php public function searchItems()

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

我的数据库字段

prod\u id、prod\u name、prod\u title、prod\u 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>


CodexWorld使用jQuery、PHP和MySQL自动完成文本框
$（文档）.ready（函数（）{
$（“#技能”）。自动完成({
来源：“http://localhost:8888/store/test/search/?"
});
});
技能：

我想创建如下格式的链接：

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

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

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

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

然后使用select方法重定向到“值”，如：

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

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

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

然后使用select方法重定向到“值”，如：

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

使用默认提供的

\u 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
};

$（“#项目”）.autocomplete({
来源：“http://localhost:8888/store/test/search/?"
})
.autocomplete（“实例”）。\u renderItem=函数（ul，项）{
返回$（“”）
.append（“”+item.desc+“”）
.附录（ul）；
//假设此处您的商品包含产品id和说明
};

这是他们关于

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

使用默认提供的

\u 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
};

$（“#项目”）.autocomplete({
来源：“http://localhost:8888/store/test/search/?"
})
.autocomplete（“实例”）。\u renderItem=函数（ul，项）{
返回$（“”）
.append（“”+item.desc+“”）
.附录（ul）；
//假设此处您的商品包含产品id和说明
};

这是他们关于

我想在这里建议使用相对url而不是绝对url，因为生产可能没有本地主机，而是有域名。

随时。。快乐编码…）我有问题，你能在Magento帮我吗？@muditmehrotra很抱歉，但是Magneto不在我的范围之内。。我的专业领域在不同的平台上：）随时快乐编码…）我有问题，你能在Magento帮我吗？@muditmehrotra很抱歉，但是Magneto不在我的范围之内。。我的专业领域在不同的平台上：）