搜索框的自动完成

Question

用JQuery 或者 JavaScritp 怎样实现搜索框的自动完成功能啊！
前台和后台代码都要 要哦

Answer 1

像Google那种自动匹配功能？http://download.csdn.net/source/1491411

Answer 2

这个东西我用了,但我写到项目里根本就没反映,也不报错.但如果单独写一个小例子就可以出效果.
会是web.config的问题吗?

Answer 3

<div class="box">
   <asp:TextBox ID="txtSherach" CssClass="tarea"  runat="server"></asp:TextBox> 
   <asp:AutoCompleteExtender ID="txtSherach_AutoCompleteExtender" runat="server" 
        DelimiterCharacters="" MinimumPrefixLength="1" CompletionInterval="100"
        ServiceMethod="GetCompletionList" Enabled="True" ServicePath="" 
        TargetControlID="txtSherach" UseContextKey="True">
   </asp:AutoCompleteExtender>
   <asp:ImageButton ID="btnsearch" CssClass="sou" ageUrl="images/search.gif"      AlternateText="搜索"  runat="server" onclick="btnsearch_Click1" />
</div>[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string[] GetCompletionList(string prefixText, int count, string contextKey)
{
   return QS.BLL.Targs1.GetCateNames(" Target like '%" + prefixText + "%'");
}
        public static string[] GetCateNames(string name)
        {
            List<string> list = new List<string>();
            StringBuilder strWhere = new StringBuilder();
            strWhere.Append("select Target from Targs ");
            if (name.Trim() != "")
            {
                strWhere.Append("where " + name);
            }            SqlDataReader dr = DbHelperSQL.ExecuteReader(strWhere.ToString());            while (dr.Read())
            {
                string target = dr["Target"].ToString();
                list.Add(target);
            }
            return list.ToArray();
        }
这是代码,高手给看看吧

Answer 4

jquery不是有个插件吗，搜下就有了

Answer 5

<div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:AutoCompleteExtender
            ID="AutoCompleteExtender1" 
            runat="server"
            TargetControlID="TextBox1"
            ServicePath="~/AutoComplete/AutoComplete.asmx"
            ServiceMethod="GetCompletionList"
            MinimumPrefixLength="1"
            EnableCaching="true"
            CompletionSetCount="5"
            >
        </asp:AutoCompleteExtender>
    </div>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class AutoComplete : System.Web.Services.WebService {
    DataSet ds;
    public AutoComplete () {        //如果使用设计的组件，请取消注释以下行 
        //InitializeComponent(); 
    }
    [WebMethod]
    public string[] GetCompletionList(string prefixText, int count)
    {
        List<string> list = new List<string>();
        string sqlStr = "select top " + count.ToString() + " name  from Dictionary where name like '" + prefixText + "%'";
        ds = DbHelperSQL.Query(sqlStr);
        for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
        {
            list.Add(ds.Tables[0].Rows[i]["name"].ToString());
        }
        return list.ToArray();
    }
}

Answer 6

有这样的插件楼上有人说了！
也有这样的JQUERYY插件。更好的是自己写个，顺便磨练下自己的JS方面的技术。看源码 建议看看baidu搜索的源码。

Answer 7

http://blog.csdn.net/bancxc/archive/2010/04/24/5524759.aspx

Answer 8

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
function search()
{
if(checkRmaId()&&checkRmaNo()&&checkCompanyName())
{
return true;
}
else
{
return false;
}
} function resetForm()
{
document.form1.reset();
$("input:text").val("");
} function searchSuggest()
{
 var str = escape($("#company_name")[0].value);
 var suggestText=$("#search_suggest")[0];
 if(str.length==0)
 {
 suggestText.style.display="none";
 return;
 }
 $('#load_layer').attr('use','false');
 $("#search_suggest").load("/backend_dev.php/rma/ajax",{company_name:str},
 function(data)
 {
var regex="::";
var sourceText=data.split(regex);
if(sourceText.length>0)
{
suggestText.style.display="";
suggestText.innerHTML = "";
for(var i=0;i<sourceText.length-1;i++)
{
var s='<div onmouseover="javascript:suggestOver(this);"';
s+=' onmouseout="javascript:suggestOut(this);" ';
s+=' onclick="javascript:setSearch(this.innerHTML);" ';
s+=' class="suggest_link">' +sourceText[i]+'</div>';
suggestText.innerHTML += s;
}
}
else
{
suggestText.style.display="none";
}
 });
  } function suggestOver(div_value)
{
        div_value.className = "suggest_link_over";
     }
     
     function suggestOut(div_value)
     {
        div_value.className = "suggest_link";
     }
     
     function setSearch(obj)
     {
        $("#company_name")[0].value = obj;
        var div = $("#search_suggest")[0];
        div.innerHTML = "";
        div.style.display="none"; 
     }
    
    function tbblur()
    {
       var div = $("#search_suggest")[0];
       div.style.display="none"; 
   }
</script>

Answer 9

<input type="text"
id="company_name" name="company_name" class='intxt01'
value=""
onkeyup="searchSuggest()" maxlength="80" tabindex="4" onblur="javascript:checkCompanyName();" />
<div id="search_suggest"
style="width: 160px; opacity: 1; background-color: #ffffff; z-index: 1; display: none; position: absolute;"></div>

Answer 10

上面的例子是向一个远程服务器上的php页面发送请求，查询到符合条件的公司名之后以"::"连接公司名，然后在客户端分隔成字符串数组。

Answer 11

http://www.cnblogs.com/zengxiangzhan/archive/2009/12/13/1623158.html

Answer 12

http://blog.csdn.net/dujingjing1230/archive/2010/04/17/5495976.aspx
使用jQuery写了一个autocomplete plugin,然后调用WCF Service实现的。希望对你有帮助。

Answer 13

http://download.csdn.net/source/464487
楼主可以看下，详尽的代码！

Answer 14

使用ajax框架的扩展控件要注意几点：
1、web.config更改设置，主要是httphandler和httpmodule节点
2、web service中添加客户端调用特性：[System.Web.Script.Services.ScriptService]
3、web service中实现自动提示的方法参数的写法必须是固定的，不能随便更改。返回类型必须为字符串数组。如：public string[] 方法名(string prefixText,int count)
4、设置AutoCompleteExtender控件。
看楼主的代码，似乎是参数有问题。多了一个参数。主要是不符合2、3点。

Answer 15

AJAX里面有的http://blog.csdn.net/inmyownsky1/archive/2010/03/24/5412619.aspx

Answer 16

http://www.google.com.hk/search?hl=zh-CN&newwindow=1&safe=strict&q=AJAX%E8%A1%A8%E5%8D%95%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8&btnG=Google+%E6%90%9C%E7%B4%A2&meta=&aq=f&aqi=&aql=&oq=&gs_rfai=