Solved: jQuery handsontable auto-complete to auto-fill other fields

Hi all,
it's about jQuery Excel-like data grid editor. More can be found here:

http://handsontable.com/

I need help to combine this working jQuery autocomplete autofill :

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>jQuery UI Autocomplete - Autofill</title>
		<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">	
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
		<script type="text/javascript">
		$(function() { 
			$('#iprice').val("");
			$('#icode').val("");

			$("#name").autocomplete({
				source: [{"name":"BMW","label":"Air Soft Gun","price":"212","abbrev":"BMW"},
						 {"name":"Chrysler","label":"Pepsi Cola Hat","price":"24","abbrev":"CRY"},
						 {"name":"Nissan","label":"Candle Lights Dinner","price":"780","abbrev":"NSS"},
						 {"name":"Suzuki","label":"Pork Meat Ball","price":"178","abbrev":"SZK"},
						 {"name":"Toyota","label":"Granny Health Supplement","price":"24","abbrev":"TYT"}],
				minLength: 2,
				select: function(event, ui) { 
					$('#iprice').val(ui.item.price);
					$('#icode').val(ui.item.abbrev);
				}
			});"BMW", "Chrysler", "Nissan", "Suzuki", "Toyota", "Volvo"

			$["ui"]["autocomplete"].prototype["_renderItem"] = function( ul, item) {
				return $( "<li></li>" ) 
  				.data( "item.autocomplete", item )
  				.append( $( "<a></a>" ).html( item.label ) )
  				.appendTo( ul );
			};

		});
		</script>
	</head>
<body>
<div class="container">
<form action="" method="post">
	<p class="ui-widget">
		<input type="text" id="name" name="name" />
		<input readonly="readonly" type="text" id="iprice" name="iprice" size="5">
		<input readonly="readonly" type="text" id="icode" name="icode" size="3">
	</p>
</form>
</div>
</body>
</html>

Open in new window

...into this working handsontable autocomplete feature:

<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <title> Handsontable | Autocomplete OK | Autofill ?!? </title>
  <script data-jsfiddle="common" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script data-jsfiddle="common" src="http://handsontable.com/dist/jquery.handsontable.full.js"></script>
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="http://handsontable.com/dist/jquery.handsontable.full.css">
</head>

<body>

        <div class="pad">
          <div id="mytables"></div>
        </div>

<script type="text/javascript">
var $container	= $("#mytables");
var comsources	= ["BMW", "Chrysler", "Nissan", "Suzuki", "Toyota"];

$container.handsontable({
  startRows: 1,
  startCols: 5,
  rowHeaders: true,
  colHeaders: ['Item Name', 'Price', 'Code'],
  minSpareRows: 1,
  contextMenu: true,
  columns: [
    {
	  data: "name",
      type: 'autocomplete',
      source: comsources,
      strict: false
    },
    {
	  data: "price"
	},
    { 
	  data: "code"
	}
  ]
});
</script>

</body>
</html>

Open in new window

So, what I'm looking for is the autocomplete autofill feature to be applied to "handsontable". On handsontale I can manage to have an autocomplete field... I want this, when a value is selected from the autocomplete, it will also fill 2 other fields with a value.

I was doing lots of trial & errors but seems not able to find a proper solution.

Please help... Thanks.

jQuery handsontable auto-complete to auto-fill other fields

Premium Content

Premium Content

Why Experts Exchange?

Ask ANY Question

Did You Know?