shivrajsa/Autocomplete.html

## Autocomplete.html
<!DOCTYPE html>
<head>
<style>
body {
  margin: 20px 30px;
  font-size: 13px;
  font-family: 'Open Sans', Helvetica, Arial;
}

a {
  color: #34A9DC;
  text-decoration: none;
}

p {
  margin: 5px 0 20px;
}

h2 {
  margin: 20px 0 0;
  font-size: 18px;
  font-weight: normal;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-sizing: border-box;
}

.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    color: #fff;
    text-decoration: none;
    background-color: #428bca;
    outline: 0
}

.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
    color: #777
}

.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
    text-decoration: none;
    cursor: not-allowed;
    background: transparent none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
}

.dropdown-header {
    display: block;
    padding: 3px 20px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #777;
    white-space: nowrap
}

.dropdown-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 990;
}
</style>
<script src="../assets/js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="../assets/css/handsontable.full.min.css" type="text/css"/>
<script src="../assets/handsontable.full.min.js"></script>
<script src="../assets/jquery.textcomplete.min.js"></script>
</head>

<body>
<div id="example" class="hot handsontable htColumnHeaders"></div>

<script>
var data = [
  ["", "Ford", "Volvo", "Toyota", "Honda"],
  ["2016", 10, 11, 12, 13],
  ["2017", 20, 11, 14, 13],
  ["2018", 30, 15, 12, 13]
];

var container = document.getElementById('example');
var hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true,
  dropdownMenu: true,
  afterSelectionEnd: function(row, col, rowEnd, colEnd) {
    if (col == 2)
      $('.handsontableInput').textcomplete([{ // tech companies
        words: ['apple', 'google', 'facebook', 'github'],
        match: /\b(\w{1,})$/,
        search: function (term, callback) {
            callback($.map(this.words, function (word) {
                return word.indexOf(term) === 0 ? word : null;
            }));
        },
        index: 1,
        replace: function (word) {
            return word + ' ';
        }
    }]);
  },
  beforeKeyDown: function(event) {
    if ([38, 39, 40, 37, 13, 27].indexOf(event.charCode || event.keyCode) != -1)
	  event.stopImmediatePropagation();
  },
});

</script>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<style>
	body {
	margin: 20px 30px;
	font-size: 13px;
	font-family: 'Open Sans', Helvetica, Arial;
	}

	a {
	color: #34A9DC;
	text-decoration: none;
	}

	p {
	margin: 5px 0 20px;
	}

	h2 {
	margin: 20px 0 0;
	font-size: 18px;
	font-weight: normal;
	}

	.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 160px;
	padding: 5px 0;
	margin: 2px 0 0;
	font-size: 14px;
	text-align: left;
	list-style: none;
	background-color: #fff;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	box-sizing: border-box;
	}

	.dropdown-menu > li > a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: 400;
	line-height: 1.42857143;
	color: #333;
	white-space: nowrap;
	}

	.dropdown-menu > li > a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: 400;
	line-height: 1.42857143;
	color: #333;
	white-space: nowrap;
	}

	.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
	color: #fff;
	text-decoration: none;
	background-color: #428bca;
	outline: 0
	}

	.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
	color: #777
	}

	.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
	text-decoration: none;
	cursor: not-allowed;
	background: transparent none;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
	}

	.dropdown-header {
	display: block;
	padding: 3px 20px;
	font-size: 12px;
	line-height: 1.42857143;
	color: #777;
	white-space: nowrap
	}

	.dropdown-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 990;
	}
	</style>
	<script src="../assets/js/jquery-1.11.1.min.js"></script>
	<link rel="stylesheet" href="../assets/css/handsontable.full.min.css" type="text/css"/>
	<script src="../assets/handsontable.full.min.js"></script>
	<script src="../assets/jquery.textcomplete.min.js"></script>
	</head>

	<body>
	<div id="example" class="hot handsontable htColumnHeaders"></div>

	<script>
	var data = [
	["", "Ford", "Volvo", "Toyota", "Honda"],
	["2016", 10, 11, 12, 13],
	["2017", 20, 11, 14, 13],
	["2018", 30, 15, 12, 13]
	];

	var container = document.getElementById('example');
	var hot = new Handsontable(container, {
	data: data,
	rowHeaders: true,
	colHeaders: true,
	dropdownMenu: true,
	afterSelectionEnd: function(row, col, rowEnd, colEnd) {
	if (col == 2)
	$('.handsontableInput').textcomplete([{ // tech companies
	words: ['apple', 'google', 'facebook', 'github'],
	match: /\b(\w{1,})$/,
	search: function (term, callback) {
	callback($.map(this.words, function (word) {
	return word.indexOf(term) === 0 ? word : null;
	}));
	},
	index: 1,
	replace: function (word) {
	return word + ' ';
	}
	}]);
	},
	beforeKeyDown: function(event) {
	if ([38, 39, 40, 37, 13, 27].indexOf(event.charCode \|\| event.keyCode) != -1)
	event.stopImmediatePropagation();
	},
	});

	</script>
	</body>
	</html>