使用jqueryUI和corethink實現的類似百度的搜索提示

使用jqueryUI和corethink實現的類似百度的搜索提示。
效果:
這裡寫圖片描述
目錄:
這裡寫圖片描述
這裡是以corethink模塊的形式,隻需要安裝上訪問

index.php?s=/test/index

1.建好模塊目錄,寫好模塊的總體文件
opencmf.php

 array(
        'name'        => 'Test',
        'title'       => 'Test',
        'icon'        => 'fa fa-newspaper-o',
        'icon_color'  => '#9933FF',
        'description' => 'Test',
        'developer'   => 'pangPython',
        'website'     => 'https://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

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="https://cdn.bootcss.com/jqueryui/1.12.0/jquery-ui.css" media="screen" title="no title">
  </head>
  <body>
 
    <!-- Autocomplete -->
    <h2 class="demoHeaders">Autocomplete</h2>
    <p>
        <input id="autocomplete" title="type &quot;a&quot;">
 
 
    </p>
 
 
  </body>
  <script type="text/javascript" src="__PUBLIC__/libs/jquery/1.x/jquery.min.js"></script>
  <script type="text/javascript" src="https://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>

 

發佈留言