使用javascript ajax C#实现类似百度的搜索框效果

最新推荐文章于 2020-07-04 10:11:01 发布

原创

最新推荐文章于 2020-07-04 10:11:01 发布 · 3.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #C# #百度搜索 #自动搜索 #autocomplete

本文介绍如何利用JavaScript的AJAX技术与C#后端配合，实现在输入框中输入文字时自动搜索的功能，类似于百度搜索。通过监听文本框变化，发送请求到后台，后台查询数据库并返回结果，前端解析数据并动态添加到列表中。在IE浏览器下，使用onPropertyChange事件，而其他浏览器可以使用相应的事件处理。同时，注意设置字符集为gb2312以处理汉字。

先看一下最终效果样式不太好看，但是功能是完全可行的，在文本框中输入文字之后，会实现自动搜索的功能。

首先介绍一下原理：

文本框下方是一个div，里面是一个ul标签，初始状态此ul中不包含任何的li标签。

当文本框文字改变的时候，使用ajax把文本框内容取出来，传递到后台，在后台中从数据库查询数据并把结果返回到前台页面。

返回的结果格式设置为：A，B，C，D；以便在前台实现字符串分割。

前台页面把返回的字符串切分成数组，依次遍历并给ul添加li节点。

具体方法：

①前台布局就不多说了，重要的是给文本框添加事件 onPropertyChange ="change(this)" ，当文字改变时触发，这个是在IE下的，火狐也有对应的，大家可以搜索一下。

@js代码：

<script language="javascript" type="text/javascript">
    function ajax(url, funSucc, fail) {
        //1.解决浏览器兼容性问题 创建AJAX对象
        if (window.XMLH

最低0.47元/天解锁文章