基于jQueryUI和Corethink實(shí)現(xiàn)百度的搜索提示功能
先給大家展示下效果圖:
目錄:
這里是以corethink模塊的形式,只需要安裝上訪(fǎng)問(wèn)
index.php?s=/test/index
1.建好模塊目錄,寫(xiě)好模塊的總體文件
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', ) ), // 用戶(hù)中心導(dǎo)航 'user_nav' => array( ), // 模塊配置 'config' => array( ), // 后臺(tái)菜單及權(quán)限節(jié)點(diǎn)配置 'admin_menu' => array( '1' => array( 'id' => '1', 'pid' => '0', 'title' => 'Test', 'icon' => 'fa fa-newspaper-o', ), '2' => array( 'pid' => '1', 'title' => '內(nèi)容管理', 'icon' => 'fa fa-folder-open-o', ), ) );
2.寫(xiě)控制器
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.寫(xiě)前臺(tái)文件
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" 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實(shí)現(xiàn)百度的搜索提示功能,實(shí)現(xiàn)一個(gè)模擬后臺(tái)數(shù)據(jù)登入的效果,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 讓input框?qū)崿F(xiàn)類(lèi)似百度的搜索提示(基于jquery事件監(jiān)聽(tīng))
- Jquery實(shí)現(xiàn)搜索框提示功能示例代碼
- jquery+php實(shí)現(xiàn)搜索框自動(dòng)提示
- jquery 模擬類(lèi)搜索框自動(dòng)完成搜索提示功能(改進(jìn))
- jQuery 插件仿百度搜索框智能提示(帶Value值)
- 利用JQuery為搜索欄增加tag提示
- Jquery模仿Baidu、Google搜索時(shí)自動(dòng)補(bǔ)充搜索結(jié)果提示
- jquery 關(guān)鍵字“拖曳搜索”之“拖曳”以及 圖片“提示自適應(yīng)放大”效果 的實(shí)現(xiàn)
- asp.net使用jquery實(shí)現(xiàn)搜索框默認(rèn)提示功能
- jquery實(shí)現(xiàn)非疊加式的搜索框提示效果
- jQuery實(shí)現(xiàn)模擬搜索引擎的智能提示功能簡(jiǎn)單示例
相關(guān)文章
laravel框架關(guān)于搜索功能的實(shí)現(xiàn)
本文是作者整理的關(guān)于laravel框架搜索功能的實(shí)現(xiàn)原理,并附上了詳細(xì)代碼,有需要的小伙伴請(qǐng)持續(xù)關(guān)注!2018-03-03
去掉destoon資訊內(nèi)容頁(yè)keywords關(guān)鍵字自帶的文章標(biāo)題的方法
這篇文章主要介紹了去掉destoon資訊內(nèi)容頁(yè)keywords關(guān)鍵字自帶的文章標(biāo)題的方法,有一定的實(shí)用價(jià)值,需要的朋友可以參考下2014-08-08
PHP會(huì)員找回密碼功能的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇PHP會(huì)員找回密碼功能的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
完美解決thinkphp驗(yàn)證碼出錯(cuò)無(wú)法顯示的方法
這篇文章主要介紹了完美解決thinkphp驗(yàn)證碼出錯(cuò)無(wú)法顯示的方法,對(duì)比官網(wǎng)給出的方法結(jié)合自身的實(shí)踐,給出了一個(gè)相對(duì)可行的解決方法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
PHP設(shè)計(jì)模式之策略模式(Strategy)入門(mén)與應(yīng)用案例詳解
這篇文章主要介紹了PHP設(shè)計(jì)模式之策略模式(Strategy)入門(mén)與應(yīng)用,結(jié)合具體實(shí)例形式詳細(xì)分析了PHP策略模式的相關(guān)概念、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2019-12-12
laravel框架 laravel-admin上傳圖片到oss的方法
今天小編就為大家分享一篇laravel框架 laravel-admin上傳圖片到oss的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
php讀取EXCEL文件 php excelreader讀取excel文件
php開(kāi)發(fā)中肯定會(huì)遇到將excel文件內(nèi)容導(dǎo)入到數(shù)據(jù)庫(kù)的需要,php-excel-reader可以很輕松的使用它讀取excel文件,本文將詳細(xì)介紹,需要了解的朋友可以參考下2012-12-12
Thinkphp 框架基礎(chǔ)之入口文件功能、定義與用法分析
這篇文章主要介紹了Thinkphp 框架基礎(chǔ)之入口文件功能、定義與用法,結(jié)合實(shí)例形式分析了Thinkphp入口文件基本功能、原理、定義與操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
laravel 之 Eloquent 模型修改器和序列化示例
今天小編就為大家分享一篇laravel 之 Eloquent 模型修改器和序列化示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
windwos下使用php連接oracle數(shù)據(jù)庫(kù)的過(guò)程分享
這篇文章主要介紹了windwos下使用php連接oracle數(shù)據(jù)庫(kù)的過(guò)程分享,講解了php連接oracle的必要條件、代碼實(shí)例以及錯(cuò)誤排查等,需要的朋友可以參考下2014-05-05

