usky-oa
/
jnpf-web-datareport


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
							<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <title>Autocomplete cell type - Handsontable</title>

  <!--
  Loading Handsontable (full distribution that includes all dependencies)
  -->
  <script data-jsfiddle="common" src="../demo/js/jquery.min.js"></script>

  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/handsontable.css">
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/pikaday/pikaday.css">
  <script data-jsfiddle="common" src="../dist/pikaday/pikaday.js"></script>
  <script data-jsfiddle="common" src="../dist/moment/moment.js"></script>
  <script data-jsfiddle="common" src="../dist/zeroclipboard/ZeroClipboard.js"></script>
  <script data-jsfiddle="common" src="../dist/numbro/numbro.js"></script>
  <script data-jsfiddle="common" src="../dist/numbro/languages.js"></script>
  <script data-jsfiddle="common" src="../dist/handsontable.js"></script>

  <!--
  Loading demo dependencies. They are used here only to enhance the examples on this page
  -->
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="css/samples.css?20140331">
  <script src="js/samples.js"></script>
  <script src="js/highlight/highlight.pack.js"></script>
  <link rel="stylesheet" media="screen" href="js/highlight/styles/github.css">
  <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">

  <!--
  Facebook open graph. Don't copy this to your project :)
  -->
  <meta property="og:title" content="Autocomplete cell type">
  <meta property="og:description"
        content="This example shows the usage of the Autocomplete feature.">
  <meta property="og:url" content="http://handsontable.com/demo/autocomplete.html">
  <meta property="og:image" content="http://handsontable.com/demo/image/og-image.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="409">
  <meta property="og:image:height" content="164">
  <link rel="canonical" href="http://handsontable.com/demo/autocomplete.html">

  <!--
  Google Analytics for GitHub Page. Don't copy this to your project :)
  -->
  <script src="js/ga.js"></script>

  <script data-jsfiddle="common">
    function getCarData() {
      return [
        ["Nissan", 2009, "black", "black"],
        ["Nissan", 2006, "blue", "blue"],
        ["Chrysler", 2004, "yellow", "black"],
        ["Volvo", 2012, "white", "gray"]
      ];
    }
  </script>
</head>

<body>


<div class="wrapper">
<div class="wrapper-row">
<div id="global-menu-clone">
  <h1><a href="../index.html">Handsontable</a></h1>

</div>

<div id="container">
<div class="columnLayout">

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad">

      <h2>Autocomplete cell type</h2>

      <p>This page shows how to configure Handsontable with Autocomplete cell type, which expands the
      <a href="handsontable.html">Handsontable cell type.</a> with features typical for a combo box that
      updates its options based on user input.</p>

      <p>There are three demos on this page:</p>

      <ul>
        <li><a href="#lazy">Autocomplete lazy mode</a></li>
        <li><a href="#strict">Autocomplete strict mode</a></li>
        <li><a href="#strict-ajax">Autocomplete strict mode (Ajax)</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad" data-jsfiddle="example1">
      <a name="lazy"></a>

      <h2>Autocomplete lazy mode</h2>

      <p>This example shows the usage of the Autocomplete feature in the default <strong>lazy&nbsp;mode</strong>. In this mode,
      user can choose one of the suggested options while typing or enter a custom value that is not included in the suggestions.</p>

      <p>In this mode, the mouse and keyboard bindings are identical as in <a href="handsontable.html">Handsontable cell type.</a></p>

      <p>The options are rendered from the <code>source</code> property which can be an array, or a function that returns an array.</p>

      <div id="example1"></div>

      <p>
        <button name="dump" data-dump="#example1" data-instance="hot1" title="Prints current data source to Firebug/Chrome Dev Tools">Dump
          data to console
        </button>
      </p>
    </div>
  </div>

  <div class="codeLayout">
    <div class="pad">
      <div class="jsFiddle">
        <button class="jsFiddleLink" data-runfiddle="example1">Edit in jsFiddle</button>
      </div>

      <script data-jsfiddle="example1">
        var example1 = document.getElementById('example1'),
          hot1;

        hot1 = new Handsontable(example1, {
          data: getCarData(),
          startRows: 7,
          startCols: 4,
          colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
          columns: [
            {
              type: 'autocomplete',
              source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],
              strict: false
            },
            {type: 'numeric'},
            {
              type: 'autocomplete',
              source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white', 'purple', 'lime', 'olive', 'cyan'],
              strict: false
            },
            {
              type: 'autocomplete',
              source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white', 'purple', 'lime', 'olive', 'cyan'],
              strict: false
            }
          ]
        });
      </script>
    </div>
  </div>
</div>

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad" data-jsfiddle="example2">
      <a name="strict"></a>

      <h2>Autocomplete strict mode</h2>

      <p>This is the same example as above with a difference that autocomplete now runs in <strong>strict
        mode</strong>.</p>

      <p>In this mode, the autocomplete cells will only accept values that are defined in the source
        array.</p>

      <p>In this mode, the mouse and keyboard bindings are identical as in <a href="handsontable.html">Handsontable cell type</a> with the below differences:</p>

      <ul>
        <li>If there is at least one option visible, there always is a selection in HOT-in-HOT.</li>
        <li>When the first row is selected, pressing <kbd>Arrow up</kbd> does not deselect HOT-in-HOT. Instead behaves as the ENTER key but moves the selection in the main HOT upwards.</li>
      </ul>

      <p>In strict mode, the <strong>allowInvalid</strong> option determines the behaviour in case of manual user input:</p>

      <ul>
        <li><code>allowInvalid: true</code> (optional) - allows manual input of value that does not exist in the
          <code>source</code>. In this case, the field background highlight becomes red and the selection
          advances to the next cell
        </li>
        <li><code>allowInvalid: false</code> - does not allow manual input of value that does not exist in the
          <code>source</code>. In this case, the <kbd>ENTER</kbd> key is ignored and the editor field remains opened.</li>
      </ul>

      <div id="example2"></div>

      <p>
        <button name="dump" data-dump="#example2" data-instance="hot2" title="Prints current data source to Firebug/Chrome Dev Tools">Dump
          data to console
        </button>
      </p>
    </div>
  </div>

  <div class="codeLayout">
    <div class="pad">
      <div class="jsFiddle">
        <button class="jsFiddleLink" data-runfiddle="example2">Edit in jsFiddle</button>
      </div>

      <script data-jsfiddle="example2">
        var container2 = document.getElementById('example2'),
          hot2;

        hot2 = new Handsontable(container2, {
          data: getCarData(),
          startRows: 7,
          startCols: 4,
          colHeaders: ['Car<br>(allowInvalid true)', 'Year', 'Chassis color<br>(allowInvalid false)', 'Bumper color<br>(allowInvalid true)'],
          columns: [
            {
              type: 'autocomplete',
              source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],
              strict: true
              // allowInvalid: true // true is default
            },
            {},
            {
              type: 'autocomplete',
              source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white', 'purple', 'lime', 'olive', 'cyan'],
              strict: true,
              allowInvalid: false
            },
            {
              type: 'autocomplete',
              source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white', 'purple', 'lime', 'olive', 'cyan'],
              strict: true,
              allowInvalid: true //true is default
            }
          ]
        });
      </script>
    </div>
  </div>
</div>

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad">
      <a name="strict-ajax"></a>

      <h2>Autocomplete strict mode (Ajax)</h2>

      <p>Autocomplete can be also used with Ajax data source. In the below example, suggestions for the "Car" column are
        loaded from server.</p>

      <p>To load data from remote (asynchronous) source, assign a function to the 'source' property. Function should
        perform the server side request and call the callback function when the result is available.</p>

      <div id="example3"></div>

      <p>
        <button name="dump" data-dump="#example3" data-instance="hot3" title="Prints current data source to Firebug/Chrome Dev Tools">Dump
          data to console
        </button>
      </p>
    </div>
  </div>

  <div class="codeLayout">
    <div class="pad">
      <div class="jsFiddle">
        <!--
        Ajax example will not work with JSFiddle at the moment because `php/cars.php` does not implement CORS.
        <button class="jsFiddleLink">Edit in jsFiddle</button>
      -->
      </div>

      <script>
        var container3 = document.getElementById('example3'),
          hot3;

        hot3 = new Handsontable(container3, {
          data: getCarData(),
          startRows: 7,
          startCols: 4,
          colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
          columns: [
            {
              type: 'autocomplete',
              source: function (query, process) {
                $.ajax({
                  //url: 'php/cars.php', // commented out because our website is hosted on static GitHub Pages
                  url: 'json/autocomplete.json',
                  dataType: 'json',
                  data: {
                    query: query
                  },
                  success: function (response) {
                      console.log("response", response);
                      //process(JSON.parse(response.data)); // JSON.parse takes string as a argument
                      process(response.data);

                  }
                });
              },
              strict: true
            },
            {}, // Year is a default text column
            {}, // Chassis color is a default text column
            {} // Bumper color is a default text column
          ]
        });
      </script>
    </div>
  </div>
</div>

<div class="footer-text"></div>
</div>

</div>

</div>
</div>

<div id="outside-links-wrapper"></div>

</body>
</html>