使用代码点火器创建 jQuery 自动完成

Question

我想使用 Codeigniter 创建 jquery 自动完成功能，数据如下：

$data = 数组 ( [0] => 数组 ( [名称] => 铅笔 [id] => 111 ) [1] => 数组 ( [名称] => 纸 [id] => 112 ) [2] => 数组 ( [名称] => 斯塔普勒 [id] => 113 ) [3] => 数组 ( [名称] => 刀具 [id] => 114 ) (

我的控制器：

public function search_product() {
if (count($data > 0)) {
$json_array = array();
for ($s = 0; $s < count($data); $s++) {
$json_array[] = array("name"=>$data[$s]['name'], "id"=>$data[$s]['id']);
}
echo json_encode($json_array);
}
}

脚本代码：

$(document).ready(function () {
$(function () {
$( "#autocomplete" ).autocomplete({
source: function(request, response) {
$.ajax({ 
url: "<?php echo base_url('search_product'); ?>",
data: { bahasa: $("#autocomplete").val()},
dataType: "json",
type: "POST",
success: function(data){
response(data);
}    
});
},
select: function (event, ui) {
$('#autocomplete').val(ui.data.name); // display the selected text
$('#code').val(ui.data.id); // save selected id to input
return false;
},
});
});
});

我的观点 ：

<div id="body">
Text: <input type="text" id="autocomplete" />
</div>
<div id="body">
Text: <input type="text" id="code" />
</div>

但是自动完成仍然不起作用。

Answer 1

对于自动完成，我使用了Typeahead Autocomplete JS。 请参考此链接 键入预 JS

包括 Typeahead css 和 js 文件

<!-- add JS And CSS for Typeahead Autocomplete -->
<link href="assets/css/jquery.typeahead.min.css" rel="stylesheet" />
<script src="<?php echo base_url(); ?>assets/js/jquery.typeahead.min.js" type="text/javascript"></script>

查看文件，创建搜索文本框

<!-- View -->
<div class="search_bar_header">
<div class="typeahead__container">
<div class="typeahead__field">
<div class="typeahead__query">
<input type="search" name="add_autocomplete" class="form-control search_input" id="add-autocomplete" placeholder="Search by destination, tour or attraction " autocomplete="off" />
<input type="hidden" name="autocomplete" id="field-autocomplete">
<div class="search_btn">
<i class="fa fa-search"></i>
</div>
</div>
</div>
</div>
</div>

JS脚本

$(document).ready(function () {
var baseurl = "<?php echo base_url() ?>";
if (jQuery('input#add-autocomplete').length > 0) {
$.typeahead({
input: '#add-autocomplete',
minLength: 1,
order: "asc",
maxItem: 12,
dynamic: true,
filter: false,
delay: 500,
template: function (query, item) {
return '<span>'+item.package_name+'</span>'
},
emptyTemplate: "no result for {{query}}",
source: {
packages: {
display: "package_name",
ajax: function (query) {
return {
type: "POST",
url: baseurl + "home/getCountryAutocomplete",
path: "data.packages",
data: {
query: "{{query}}"
},
callback: {
done: function (data) {
return data;
}
}
}
}
},
},
callback: {
onClick: function (node, a, item, event) {
// onclick do something
}
},
debug: true
});
}
});

在控制器中，

public function getCountryAutocomplete()
{
$json = array();
$status = true;
$query = $this->input->post('query');
$result = $this->home_model->getGlobalSearch($query);
if (!empty($result)) {
foreach ($result as $key => $element) {
$json[] = array(
'package_id' => $element['package_id'],
'package_name' => $element['package_name'],
);
}
} else {
$status = false;
}
$this->output->set_header('Content-Type: application/json');
echo json_encode(array(
"status" => $status,
"error"  => null,
"data"   => array(
"packages" => $json,
)
));
}

在模型中，

public function getGlobalSearch($data)
{
$this->db->select(array('id', 'sortname', 'name'));
$this->db->from('countries');
$this->db->where('status', '1');
$this->db->like('name', $data, 'both');
$country = $this->db->get()->result_array();
}

我希望它能帮助你:)

Answer 2

尝试像这样修改你的 JavaScript 代码：

$(function () {
$("#autocomplete").autocomplete({
source: function (request, response) {
$.ajax({
url: "<?php echo base_url('search_product'); ?>",
data: {
bahasa: request.term
},
dataType: "json",
type: "POST",
success: function (data) {
response(data);
}
});
},
select: function (event, ui) {
$('#autocomplete').val(ui.item.name); // display the selected text
$('#code').val(ui.item.id); // save selected id to input
return false;
},
});
});

要获取已发布的关键字，请在控制器查询代码上使用$_POST['bahasa']变量。

Answer 3

下面的代码可以根据需要工作：-

控制器

public function search_product() {
$post = $this->input->post();       
if(isset($post['bahasa']) && !empty($post['bahasa'])){
$data = $this->parents_model->fetchStationery($post['bahasa']);
echo json_encode($data);
}
}

型

public function fetchStationery($term){
$response = array();
$this->db->select('*');
$this->db->where("name like '%".$term."%' ");
$records = $this->db->get('stationery')->result();
foreach($records as $row ){
$response[] = array("value"=>$row->id,"label"=>$row->name);
}       
return $response;        
}

视图

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="body">
Text: <input type="text" id="autocomplete" />
</div>
<div id="body">
Text: <input type="text" id="code" />
</div>

Javascript Code

<script>
$(document).ready(function () {            
$( "#autocomplete" ).autocomplete({
source: function(request, response) {
$.ajax({ 
url: "<?php echo base_url('home2/search_product'); ?>",
data: { bahasa: request.term},
dataType: "json",
type: "POST",
success: function(data){
response(data);
}    
});
},
select: function (event, ui) {
$('#autocomplete').val(ui.item.label);
$('#code').val(ui.item.value);
return false;
}
});
});
</script>