请问如何实现模糊查询

我想弄一个模糊查询控件，类似于百度搜索的搜索框。当我输入字符的同时，显示以已输入字符或者字符串开始的字符串的下拉列表。如果能用JS实现最好。望大侠不吝赐教模糊查询JavaScript控件

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

jquery 有个自动匹配的控件
我做过一个，思路这样的：先在你的页面中定义一个div，定位在你的文本框下边框，默认隐藏；
然后通过查询数据库，把结果循环显示在div上；最后显示这个div。当然这个文本框需要添加的事件为onkeyup或者onkeydown，用jquery.ajax去实现前后台的交互！
捕获鼠标事件，然后传入参说，ajax获取数据给前台显示
这个没输入个字符都要发ajax请求？看起来还算可行唯独这点~
这个需要SQL语句支持吧，js只负责获取查询条件的
我是先用PHP在后台把数据找好了，然后通过JSON传给JS，这样没有用到ajax了，问题只在于如何实现模糊查询的功能，可以只用JS实现
jquery提供了控件：jquery.autocomplete.js
很好很强大！
要ajax 和后台配合吧
onkeyup 触发事件，然后ajax传给后台。连接数据库判断
在返回
请教我在网上下载的jquery.autocomplete.js的相关例子程序为什都没有用呢？
所有文件我都包含了的，测试的时候都用的静态数组来测试
比如列出测试代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComplete" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.autocomplete.js" type="text/javascript"></script>
<link href="jquery.autocomplete.css" type="text/css" />
<script language="javascript" type="text/javascript">
//直接由数组获得
$(document).ready((function () {
var data = ["河北省", "河南省", "山东", "北京", "天津"];
$("#txtProvince").autocomplete(data);
}
));
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
省份：<input id="txtProvince" type="text" />
</div>

</form>
</body>
</html>
那就用JS的  str1.indexOf("str2") != -1 //比较2个字符串 str1中是否存在str2 查看是否有匹配的
// 比较完后  填充到自己要显示的数组里   再对数组进行绘制显示其它匹配更加较模糊的  就只能自己写了
这得看你的后台使用什么？如果是使用struts的话，就可以直接使用struts自带的标签实现。。基本思路是当文本框内容改变时，通过ajax去后台查询数据，并显示
请教我在网上下载的jquery.autocomplete.js的相关例子程序为什都没有用呢？
所有文件我都包含了的，测试的时候都用的静态数组来测试
比如列出测试代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComplete" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.autocomplete.js" type="text/javascript"></script>
<link href="jquery.autocomplete.css" type="text/css" />
<script language="javascript" type="text/javascript">
//直接由数组获得
$(document).ready((function () {
var data = ["河北省", "河南省", "山东", "北京", "天津"];
$("#txtProvince").autocomplete(data);
}
));
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
省份：<input id="txtProvince" type="text" />
</div>

</form>
</body>
</html>

用你的代码确认是可以的，是不是你的引用路径错了？
<script src="../../Scripts/jquery.autocomplete.js" type="text/javascript"></script>
引用路径应该是对的，我把这个html文件和.js及.css文件放在同一个目录下的
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="WebApplication2.Main" %><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.autocomplete.js" type="text/javascript"></script>
    <link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript">
        //直接由数组获得
        $(document).ready((function () {
            var data = ["河北省", "河南省", "山东", "北京", "天津"];
            $("#txtProvince").autocomplete(data);
        }
));
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        省份：<input id="txtProvince" type="text" />
    </div>
    </form>
</body>
</html>我用你的代码是可以的，注意引用那个CSS
<link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" />
你要注意下
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="WebApplication2.Main" %><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.autocomplete.js" type="text/javascript"></script>
    <link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript">
        //直接由数组获得
        $(document).ready((function () {
            var data = ["河北省", "河南省", "山东", "北京", "天津"];
            $("#txtProvince").autocomplete(data);
        }
));
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        省份：<input id="txtProvince" type="text" />
    </div>
    </form>
</body>
</html>我用你的代码是可以的，注意引用那个CSS
<link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" />
你要注意下
替换CSS的调用方式还是一样啊。
确实像是CSS没有起作用，但是替换文件，包含方式都不行
你的前台展示这块  是自动匹配功能  ，就是隐藏一个div，  搜索框的keyup事件---向后台请求值（这也就是你说的[先用PHP在后台把数据找好了，然后通过JSON传给JS]）--填充隐藏的div---改变div样式，显示出来。而显示的东西是由[先用PHP在后台把数据找好了，然后通过JSON传给JS]决定的，这快肯定是要向数据库查询数据，  这里才属于模糊查询
select   字段1,  字段2, 字段N  from  table
         where  查询字段  like '%搜索框的值'
            or  查询字段  like '搜索框的值%'
我的jquery.autocomplete.js还是没有用啊，好像是.CSS文件没有起作用。请教谁那有没有使用jquery.autocomplete.js的示例工程啊，包含文件jquery.js;jquery.autocomplete.js;jquery.autocomplete.css这三个文件，我在网上下载下来的这些文件及工程直接使用都无效，我想对比一下是否需要做些修改，或者是和电脑的配置有关。
麻烦发我一份，[email protected]