javascript 击键时的动态搜索结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9709841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamic search results on keystroke
提问by Simon Kiely
I have a list of items stored in a database.
我有一个存储在数据库中的项目列表。
I am using a foreach to list the items returned with a checkbox next to each item like so:
我正在使用 foreach 列出返回的项目，每个项目旁边都有一个复选框，如下所示：
var db = Database.Open("database");
var sql = "SELECT * from table";
var result = db.Query(sql);
...
...
@{foreach (var user in result) {
<tr><td>@table.attribute</td> <td>@table.secondAttribute @table.thirdAttribute</td>
<td><input type="checkbox" name="attribute" value="attribute" /></td></tr>
The functionality I would like to have is a textbox which, upon the user typing a letter, would limit the number of items listed by my foreach based on what character the user enters. So I've tried to use the JQuery autoComplete module, but I'm not entirely sure how to use it in this case, or even if it is possible.
我想要的功能是一个文本框，当用户输入一个字母时，它会根据用户输入的字符限制我的 foreach 列出的项目数量。所以我尝试使用 JQuery autoComplete 模块，但我不完全确定在这种情况下如何使用它，或者即使可能。
So I added in :
所以我添加了：
$(function(){
$('#name').autocomplete({source:'getUsers'});
});
... Enter their name:
...输入他们的名字：
And then in getUsers :
然后在 getUsers 中：
@{
var db = Database.Open("database");
var term = Request.QueryString["term"] + "%";
var sql = "SELECT * from table where attribute LIKE @0 OR secondAttribute LIKE @0 OR thirdAttribute LIKE @0";
var result = db.Query(sql, term);
var data = result.Select(p => new{label = p.attribute + " " + p.secondAttribute});
Json.Write(data, Response.Output);
}
This, of course, just retrieves the data for the textbox and doesn't delimit the returned checkboxes at all. Is there a way I can do this ?
当然，这只是检索文本框的数据，根本不分隔返回的复选框。有没有办法做到这一点？
回答by nnnnnn
If client-side only search is acceptable as per your comment, here's a really simple way to do it:
如果根据您的评论只能接受客户端搜索，这是一种非常简单的方法：
$(document).ready(function() {
var $rows = $("tr");
$("#yoursearchinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$rows.show();
else {
$rows.hide();
$rows.has("td:contains(" + val + ")").show();
}
});
});
Demo: http://jsfiddle.net/k5hkR/
演示：http: //jsfiddle.net/k5hkR/
Note that the above will do a case sensitivesearch. Here is a slightly more complicated version that does a case insensitivesearch:
请注意，以上将进行区分大小写的搜索。这是一个稍微复杂的版本，它进行不区分大小写的搜索：
$(function() {
var $cells = $("td");
$("#search").keyup(function() {
var val = $.trim(this.value).toUpperCase();
if (val === "")
$cells.parent().show();
else {
$cells.parent().hide();
$cells.filter(function() {
return -1 != $(this).text().toUpperCase().indexOf(val);
}).parent().show();
}
});
});?
Demo: http://jsfiddle.net/k5hkR/1/
演示：http: //jsfiddle.net/k5hkR/1/
The second solution is just something I whipped up to give you the general idea - obviously it can be tidied up and made more efficient.
第二种解决方案只是我提出来给你的一般想法 - 显然它可以整理并提高效率。
