@reactual/handsontable
Version:
Spreadsheet-like data grid editor
323 lines (268 loc) • 11.1 kB
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/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 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>