六三科技网
您的当前位置:首页jquery创建一个ajax关键词数据搜索实现思路_jquery

jquery创建一个ajax关键词数据搜索实现思路_jquery

来源:六三科技网


在web开发过程当中,我们经常需要在前台页面输入关键词进行数据的搜索,我们通常使用的搜索方式是将搜索结果用另一个页面显示,这样的方式对于搭建高性能网站来说不是最合适的,今天给大家分享一下如何使用 jQuery,MySQL 和 Ajax创建简单和有吸引力的 Ajax 搜索,这是继《使用jQuery打造一个实用的数据传输模态弹出窗体》第二篇jquery项目实际运用的教程,希望大家在开发项目的时候能够根据自己的实际情况灵活运用

点击搜索默认显示所有的结果

输入A之后显示的搜索结果

输入 p之后显示的搜索结果

没有找到相关的搜索词页面

演示 -点击下面的搜索按钮搜索数据

文件结构 主要用到几个文件 index.php首页 dbcon.php数据库连接文件 search.php搜索处理页面

第一步创建一个ajax_search的数据库,紧接着创建一个ajax_search表
代码如下:
CREATE TABLE `ajax_search` (
`id` int(11) NOT NULL auto_increment,
`FirstName` varchar(50) NOT NULL,
`LastName` varchar(50) NOT NULL,
`Age` int(11) NOT NULL,
`Hometown` varchar(50) NOT NULL,
`Job` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

HTML :index.php--程序主页面
代码如下:




Ajax 教程:使用jquery和mysql创建一个ajax搜索



输出结果,怎么样是不是很简单,如果你的项目有需要,可以直接使用这个代码

显示全文