代码:http://download.csdn.net/detail/u012995856/9676845
效果:

目录:

这里是以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实现的类似百度的搜索提示的更多相关文章

  1. AJAX实现类似百度的搜索提示,自动补全和键盘、鼠标操作

    <script type="text/javascript"> $(document).ready(function(){ var highlightIndex = - ...

  2. Jquery实现类似百度的搜索框

    最近工作中需要做一个搜索框,类似百度的搜索框,需要达到两个功能: 1.输入关键字,展示匹配的下拉列表 2.选择匹配的项后查出相关内容 一般电商网站中也经常用到该搜索条,首先分析功能实现,输入关键字马上 ...

  3. ajax+JQuery实现类似百度智能搜索框

    最近再学习ajax,上课老师让我们实现一个类似百度首页实现搜索框的功能,刚开始做的时候没有一点头绪,查阅大量网上的资源后,发现之前的与我们现在的有些区别,所以在此写出来,希望能对大家有所帮助. 下面先 ...

  4. JSONP跨域访问百度实现搜索提示小案例

    一.JSONP简介 JSONP 全称 JSON with padding(填充式 JSON 或参数式 JSON),JSONP实现跨域请求的原理,就是动态创建<script>标签,然后利用& ...

  5. QComboBox:类似于的百度的搜索提示

    参考: http://blog.csdn.net/lingchen214/article/details/17960789 http://blog.sina.com.cn/s/blog_a6fb6cc ...

  6. JavaScript实现模糊推荐的input框(类似百度搜索框)

    如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

  7. asp.net mvc 使用 Autocomplete 实现类似百度,谷歌动态搜索条提示框。

    Autocomplete是一个Jquery的控件,用法比较简单. 大家先看下效果: 当文本框中输入内容,自动检索数据库给出下拉框进行提示功能. 需要用此控件大家先到它的官方网站进行下载最新版本: ht ...

  8. 如何实现SP文档库类似百度文档库的效果 (副标题:如何在SP2013文档库的SWF文件用FlexPager显示)

    1. 编辑文档库列表显示页面,如下图: 2. 添加内容编辑器,如下图: 3. 添加如下在[内容编辑器中]-[编辑源],添加如下JS代码,如下图: ​ 代码如下: <scrip type=&quo ...

  9. 利用FlashPaper实现类似百度文库功能

    最近需要实现一个类似百度文库的功能,在Google上淘了一段时间,发现FlashPaper还算能够不错的实现此需求. 首先讲下思路: 1>安装FlashPaper: 2>利用java代码将 ...

随机推荐

  1. winform 查看远程服务器上的文件

    解决方案: 1. 在目标服务器上发布webservice,实现文件下载的方法. using System; using System.Collections.Generic; using System ...

  2. 跟着百度学PHP[14]-COOKIE的应用/网站登陆案例完整案例

    先在数据库当中创建以下数据: mysql> create table user( -> id int not null auto_increment, ) not null default ...

  3. JVM Specification 9th Edition (4) Chapter 3. Compiling for the Java Virtual Machine

    Chapter 3. Compiling for the Java Virtual Machine 内容列表 3.1. Format of Examples 3.2. Use of Constants ...

  4. linux c log 日志接口

    #define SIZE_16M 16777216             //1024*1024*16 #define LOG_FILE_PATH "./mylog.txt"   ...

  5. chpasswd 更简单的更改密码的方式

    [root@m01 .ssh]# useradd test[root@m01 .ssh]# echo "test:123"|chpasswd Linux命令:chpasswd 批量 ...

  6. RMAN Maintenance

    CROSSCHECK: 确认 rman repository 与 实际的备份集 是否同步. 你可以先使用 LIST 命令查看你之前做的备份的情况, 然后使用 CROSSCHECK 命令来确认这些文件还 ...

  7. win下如何查看那个网络端口被那个应用程序使用

    在运行里面键入cmd打开命令行窗口.     在命令行窗口键入命令: netstat -ano 第一和第二列是自己网络的端口和外网连接的端口,pid:(全称Process Identification ...

  8. c# @符号后面对 双引号转义

    本文讲述c#中如何转义双引号. c#中转义双引号",使用的转义字符仍然是\. string str = "\"www.itjsxx.com\""; 但 ...

  9. 【JavaEE】SSH+Spring Security整合及example

    到前文为止,SSH的基本框架都已经搭建出来了,现在,在这基础上再加上权限控制,也就是Spring Security框架,和前文的顺序一样,先看看需要加哪些库. 1. pom.xml Spring Se ...

  10. 基于字典SR各种方法【稀疏编码多种方法】

    基于字典的图像超分辨率实现 - CSDN博客 http://blog.csdn.net/u011630458/article/details/65635155 简介 这段时间在看基于字典的单帧图像超分 ...