Study Journals of TYRuan: 使用JQuery autocomplete時，如何呼叫外來 datasource

2020年10月11日星期日

使用JQuery autocomplete時，如何呼叫外來 datasource

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Remote datasource</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-autocomplete-loading {
    background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );    
      $( "#log2" ).val(message);
    }
 
    $( "#birds" ).autocomplete({
      source: "search.php",
      minLength: 2,
      select: function( event, ui ) {
        log( "Selected: " + ui.item.value + " aka " + ui.item.id );
      }
    });
  } );
  </script>
</head>
<body>
<!-- CSS 也可以在html body這樣引用
<STYLE TYPE="text/css">
 <!--
  @import url(https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css);
  @import url(https://jqueryui.com/resources/demos/style.css);
--> 
</STYLE> 
-->
<div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds">
</div>
 
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

<input id="log2" value="test"></input>
 
</body>
</html>
 
///////////////////////////////////////////////////////////////////////////////////
search.php

  1 <?php
  2 header("Access-Control-Allow-Origin: *");
  3 header('Content-Type: application/json; charset=utf-8');
  4 include("../../../ini/db_erp_ini.php");
  5 include("../../mod/mod_oracle.php");
  6
  7 $term = $_GET['term'];
  8
  9 $oracle = new Oracle($db_erp_ini);
 10
 11 #$oracle->debug = true;
 12
 13 $sql = "
 14 select nmt01 \"value\", nmt02 \"label\"
 15   from echo01.nmt_file
 16  where nmtacti = 'Y'
 17    and nmt02 like '%" . $term  . "%'
 18  order by 1
 19 ";
 20
 21 $oracle->query($sql);
 22 $results = $oracle->fetchAll();
 23 #$news = array();
 24 #foreach ($results as $result )
 25 #{
 26 #    $news[] = array( 'label'=>$result['LABEL'],
 27 #                     'value'=>$result['VALUE']
 28 #                   );
 29 #}
 30
 31 #echo json_encode($news);
 32 echo json_encode($results);
 33 ?>

Study Journals of TYRuan

標籤

2020年10月11日星期日

使用JQuery autocomplete時，如何呼叫外來 datasource

沒有留言:

張貼留言

網誌存檔

標籤

2020年10月11日 星期日

使用JQuery autocomplete時，如何呼叫外來 datasource

沒有留言:

張貼留言

網誌存檔

2020年10月11日星期日