forked from Mirrors/apostrophe
318 lines
10 KiB
HTML
318 lines
10 KiB
HTML
<!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.full.css">
|
|
<script data-jsfiddle="common" src="../dist/handsontable.full.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>
|