基于jQueryUI和Corethink实现百度的搜索提示功能

先给大家展示下效果图:

目录:

这里是以corethink模块的形式,只需要安装上访问

index.php?s=/test/index

1.建好模块目录,写好模块的总体文件

opencmf.PHP

<?php return array( // 模块信息 'info' => array( 'name' => 'Test', 'title' => 'Test', 'icon' => 'fa fa-newspaper-o', 'icon_color' => '#9933FF', 'description' => 'Test', 'developer' => 'pangPython', 'website' => 'http://blog.csdn.net/u012995856/', 'version' => '1.3.0', 'dependences' => array( 'Admin' => '1.3.0', ) ), // 用户中心导航 'user_nav' => array( ), // 模块配置 'config' => array( ), // 后台菜单及权限节点配置 'admin_menu' => array( '1' => array( 'id' => '1', 'pid' => '0', 'title' => 'Test', 'icon' => 'fa fa-newspaper-o', ), '2' => array( 'pid' => '1', 'title' => '内容管理', 'icon' => 'fa fa-folder-open-o', ), ) );

2.写控制器

IndexController

<?php namespace Test\Controller; use Think\Controller; use Home\Controller\HomeController; /** * */ class IndexController extends HomeController{ public function index() { $this->display(); } public function mydata($keyword){ if ($keyword==11) { echo '["pangPython","HelloWorld"]'; }else{ echo '["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"]'; } } }

3.写前台文件

index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="http://cdn.bootcss.com/jqueryui/1.12.0/jquery-ui.css" media="screen" title="no title"> </head> <body> <!-- Autocomplete --> <h2 class="demoHeaders">Autocomplete</h2> <div> <input id="autocomplete" title="type "a""> </div> </body> <script type="text/javascript" src="__PUBLIC__/libs/jquery/1.x/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/jqueryui/1.12.0/jquery-ui.js"></script> <script type="text/javascript"> var url ="{:U('test/index/mydata')}"; $( "#autocomplete" ).autocomplete({ minLength: 2, source: function(request,response){ $.getJSON( url,{ keyword:request.term }, function(data,status,xhr){ response(data); } ); } }); </script> </html>

以上所述是小编给大家介绍的基于jQueryUI和Corethink实现百度的搜索提示功能,实现一个模拟后台数据登入的效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-10-29 06:50:38

基于jQueryUI和Corethink实现百度的搜索提示功能的相关文章

基于jQueryUI和Corethink实现百度的搜索提示功能_php实例

先给大家展示下效果图:   目录:   这里是以corethink模块的形式,只需要安装上访问 index.php?s=/test/index 1.建好模块目录,写好模块的总体文件 opencmf.PHP <?php return array( // 模块信息 'info' => array( 'name' => 'Test', 'title' => 'Test', 'icon' => 'fa fa-newspaper-o', 'icon_color' => '#993

输入自动提示搜索提示功能的使用说明:sugggestion.txt_javascript技巧

readme: 本文件记录了suggestion.js文件的功能使用说明: 复制代码 代码如下: /* * 功能:该js文件中的代码实现了[输入自动搜索提示]功能,如百度.google搜索框中输入一些字符会以下拉列表形式给出一些提示,提高了用户体验: * 使用技术:JQuery+Ajax * * 一.如何使用该功能? * 1.使用该功能是需引入以下文件: * 1)<link type="text/css" rel="stylesheet" href="

输入自动提示搜索提示功能的javascript:sugggestion.js_javascript技巧

复制代码 代码如下: /** * 功能:该js文件中的代码实现了[输入自动搜索提示]功能,如百度.google搜索框中输入一些字符会以下拉列表形式给出一些提示,提高了用户体验 * 使用说明:参见suggestions.txt文件 * Author:sunfei(孙飞) Date:2013.08.21 */ var SugObj = new Object(); $(document).ready(function(){ //文件加载完成后获取输入框属性信息,确保搜索提示数据和文本输入框中数据的显示

输入自动提示搜索提示功能的样式文件:suggestion.css

输入自动提示的搜索提示功能,想必大家在很多地方都有遇到过吧,其实实现很简单,下面是suggestion.css样式文件,感兴趣的朋友可以参考下     复制代码 代码如下: .sugLayerDiv{ position:relative; overflow:hidden; /*DIV 内容溢出时隐藏*/ background:#fff; /*DIV 背景颜色*/ border:#c5dadb 1px solid; /*DIV 边框样式*/ display:none; /*DIV 初始隐藏*/ }

雅虎发布增强型搜索提示功能 比Google更强大

  雅虎推出了针对网页搜索框的几个新的搜索功能,可以让用户更轻松地到达.浏览自己最需要的雅虎服务.例如,我们在搜索框中键入股票代码, 搜索辅助层中则显示该公司的实时股票行情,以及有关该公司的股票图表链接和新闻链接. 当你键入像"科比",一个运动员的名字时,搜索提示会显示新闻,比赛日志,分数和时间表,而且还有照片.当你键入任何旅游目的地名称时,你还可以看到旅游信息. 新的搜索提示功能包括一个智能检测系统,可以带你到雅虎图片搜索或雅虎新闻搜索.例如我们键入"科比"时,出

php+jquery 实现搜索提示功能实例

今天突然想给本站做个搜索页面,这样用户可以通过搜索来找到自己喜欢的内容,也避免了在海量信息中手动查找资源的麻烦,我的目标和百度首页的效果类似,当用户输入要搜索的文字时,我们在下方给出相关的十条信息,如果用户要找的就是这十条信息内的某一条,那么简单,直接点击就可在新页面中打开页面,主要就是想更人性化一点,让用户使用起来更方便. 先看一下效果图吧,这样更有动力,要不然大家还不知道我在讲什么,到底要达到什么样的效果! 下面先主要讲解原理: 在search.html页面中,用户在搜索框内输入"j&quo

jquery 模拟类搜索框自动完成搜索提示功能(改进)_jquery

autopoint.js代码: 复制代码 代码如下: /* * @date: 2010-5-22 21:42:15 * @author: 胡灵伟 * Depends: * jquery.js * * function:类似GOOGLE搜索框提示功能 */ (function($) { $.fn.autopoint = function (options) { defaults = { url:options.url, keyLeft : 37,//向左方向键 keyUp : 38,//向上方向键

让input框实现类似百度的搜索提示(基于jquery事件监听)_jquery

挺炫的一个效果,百度和谷歌好像已实现好多年了,我以为在网上能轻易找到代码来实现这个效果.真正遇到这个需求,发现还真找不到.于是自己动手写这个效果,由于我是把效果整合到我的整套框架里,所以没有进行单独的封装. 需求:实现带提示的input框,类似百度搜索,有改动的时候去获取常用关键词,数据来源于系统数据库,支持鼠标选择或键盘选择 思路:框架一贯思路,通过class作为监听入口,通过data作为数据传递:通过监听input和propertychange事件实现实时的改动监听,input是主流,pro

jquery ajax获取json数据实现百度的搜索提示

挺炫的一个效果,百度和谷歌好像已实现好多年了,我以为在网上能轻易找到代码来实现这个效果.真正遇到这个需求,发现还真找不到.于是自己动手写这个效果,由于我是把效果整合到我的整套框架里,所以没有进行单独的封装. 需求: 实现带提示的input框,类似百度搜索,有改动的时候去获取常用关键词,数据来源于系统数据库,支持鼠标选择或键盘选择 思路: 框架一贯思路,通过class作为监听入口,通过data作为数据传递: 通过监听input和propertychange事件实现实时的改动监听,input是主流,