Javascript 创建搜索字段并动态更新视图
我的控制器中有一个将用户数据传递到视图的方法:Javascript 创建搜索字段并动态更新视图,javascript,php,sql,codeigniter,Javascript,Php,Sql,Codeigniter,我的控制器中有一个将用户数据传递到视图的方法: $user['where'] = array('user.id_company' => $company_id); $data['users'] = $this->user_model->getListDetailled_sending($user); 通过这个,我显示如下数据: <div class="col-md-4"> <div class="portlet light">
$user['where'] = array('user.id_company' => $company_id);
$data['users'] = $this->user_model->getListDetailled_sending($user);
通过这个,我显示如下数据:
<div class="col-md-4">
<div class="portlet light">
<div class="portlet-title">
<div class="caption font-blue-sunglo"> <i class="fa fa-user-secret font-blue-sunglo"></i> <span class="caption-subject bold uppercase"> Utilisateurs</span> </div>
<input id="searchUser" type="text" placeholder="Chercher un utilisateur" class="form-control" onchange="searchUser(this)">
</div>
<div class="md-checkbox-list">
foreach ($users as $value){
echo "<div class=\"md-checkbox\">";
echo "<input id=\"usersbox[".$value->id_user."]\" name=\"usersbox[".$value->id_user."]\" groups=\"".$value->groups."\" class=\"md-check users\" type=\"checkbox\">";
echo "<label for=\"usersbox[".$value->id_user."]\">";
echo "<span class=\"inc\"></span>";
echo "<span class=\"check\"></span>";
echo "<span class=\"box\"></span>";
$label = ($this->session->userdata['logged_in']['acl_id'] == 10) ? $value->name. " ".$value->firstname : $value->name. " ".$value->firstname;
echo $label;
echo "</label>";
echo "</div>";
}
?>
</div>
</div>
</div>
利用者
foreach(用户为$value){
回声“;
echo“id\u user.”]\“name=\“usersbox[“$value->id\u user.”]\“groups=\.$value->groups.“\”class=\“md check users\”type=\“checkbox\>”;
回显“id\u user.”]\“>”;
回声“;
回声“;
回声“;
$label=($this->session->userdata['logged_in']['acl_id']==10)?$value->name。“$value->firstname:$value->name。”“$value->firstname;
echo$标签;
回声“;
回声“;
}
?>
我想做的是创建一个搜索字段来对这些数据进行分类。现在看起来是这样的。我希望能够在文本框中写入一些内容,并且只在文本框中包含当前值的当前复选框中显示数据
我考虑过使用Javascript,用一个参数调用Controller方法,并刷新页面(一个在name和firstname上包含内容的sql查询),但我不想调用整个数据库,因为它需要对显示的数据进行排序。
我不知道最好的方法是什么
编辑:我当前工作不太好解决方案:
function myFunction(obj) {
div = document.getElementById("userDiv");
div.innerHTML = '';
var ajax_url = "<?php echo site_url('sending/form/searchUser/');?>";
var search = obj.value;
$.ajax({
type: "POST",
url: ajax_url,
data: { 'search': search },
success: function(data){
// Parse the returned json data
var opts = $.parseJSON(data);
//console.log(opts);
// Use jQuery's each to iterate over the opts value
$.each(opts, function(i, d) {
// You will need to alter the below to get the right values from your json object.
console.log(i);
console.log(d.id_user);
div.innerHTML += '<div class=\"md-checkbox\"><input id=\"usersbox[' + d.id_user + ']\" name=\"usersbox[' + d.id_user + ']\" class=\"md-check users\" type=\"checkbox\"><label for=\"usersbox[' + d.id_user + ']\"><span class=\"inc\"></span><span class=\"check\"></span><span class=\"box\"></span>' + d.name + ' ' + d.firstname + '</label></div>';
});
}
});
}
函数myFunction(obj){
div=document.getElementById(“userDiv”);
div.innerHTML='';
var ajax_url=“”;
var搜索=对象值;
$.ajax({
类型:“POST”,
url:ajax\uURL,
数据:{“搜索”:搜索},
成功:功能(数据){
//解析返回的json数据
var opts=$.parseJSON(数据);
//控制台日志(opts);
//使用jQuery的each遍历opts值
$。每个(选项、功能(i、d){
//您将需要修改以下内容,以便从json对象中获得正确的值。
控制台日志(i);
控制台日志(d.id\u用户);
div.innerHTML+=''+d.name+''+d.firstname+'';
});
}
});
}
您可以用javascript代码替换php代码,并将结果附加到html中
<div class="col-md-4">
<div class="portlet light">
<div class="portlet-title">
<div class="caption font-blue-sunglo"> <i class="fa fa-user-secret font-blue-sunglo"></i> <span class="caption-subject bold uppercase"> Utilisateurs</span> </div>
<input id="searchUser" type="text" placeholder="Chercher un utilisateur" class="form-control" onkeyup="searchUser(this)">
</div>
<div id="users">
</div>
</div>
</div>
利用者
而js:
<script>
//on load all the names will be displayed, if you want results just after you type an character in the input delete this
window.onload = searchUser('');
//better to call this function "onkeyup"
function searchUser(user) {
//this may vary if you have an object or array in php (i used array)
var users = <?php echo json_encode($users); ?>;
var usersHtmlDiv = $('#users');
//this deletes the child nodes on a new search
usersHtmlDiv.empty();
var htmlFormat = '';
var input = (user.value) ? user.value : '';
users.forEach(function(entry) {
console.log(entry);
console.log(entry.id);
//you can add firstname too here
if(entry.name.startsWith(input) || entry.firstname.startsWith(input)) {
htmlFormat += "<div class=\"md-checkbox\">";
htmlFormat += "<input id=\"usersbox[" + entry.id_user + "]\" name=\"usersbox[" + entry.id_user + "]\" groups=\"" + entry.groups +"\" class=\"md-check users\" type=\"checkbox\">";
htmlFormat += "<label for=\"usersbox[" + entry.id_user + "]\">";
htmlFormat += "<span class=\"inc\"></span>";
htmlFormat += "<span class=\"check\"></span>";
htmlFormat += "<span class=\"box\"></span>";
//here you have something about the session that does not make sense (check the if statement)
htmlFormat += entry.name + " " + entry.firstname;
htmlFormat += "</label>";
htmlFormat += "</div>";
}
});
//append the resulted html to the users div
usersHtmlDiv.append(htmlFormat);
}
//加载时,如果您希望在输入中键入字符后立即显示结果,则将显示所有名称。删除此项
window.onload=searchUser(“”);
//最好调用此函数“onkeyup”
函数searchUser(用户){
//如果您在php中有一个对象或数组(我使用的是数组),这可能会有所不同
var用户=;
var usersHtmlDiv=$(“#users”);
//这将删除新搜索上的子节点
usersHtmlDiv.empty();
var htmlFormat='';
变量输入=(user.value)?user.value:“”;
users.forEach(函数(条目){
控制台日志(条目);
console.log(entry.id);
//你也可以在这里加上名字
if(entry.name.startsWith(输入)| | entry.firstname.startsWith(输入)){
htmlFormat+=“”;
htmlFormat+=“”;
htmlFormat+=“”;
htmlFormat+=“”;
htmlFormat+=“”;
htmlFormat+=“”;
//在这里,您对会话有一些没有意义的地方(检查if语句)
htmlFormat+=entry.name+“”+entry.firstname;
htmlFormat+=“”;
htmlFormat+=“”;
}
});
//将生成的html追加到users div
usersHtmlDiv.append(htmlFormat);
}
另外,您可能需要清理一点代码。如果使用name和firstname变量,请尝试使用firstname和lastname
祝你今天愉快,
I.M.非常感谢,我花了一上午的时间才想出一个解决方案,但效果不如你的。我更新了我的帖子,告诉你我当时在哪里。