Link to home
Start Free TrialLog in
Avatar of tobece
tobece

asked on

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.
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of tobece
tobece

ASKER

Thanks @leakim971 it really saves my time a lot.

Would you help me once more time on the lowercase issue.
For example :
* If I type su then nothing appears as suggestion.
* If I type Su (1st char is uppercase) then Suzuki appears as suggestion.

I think will be better if I type su (all lowercase) then Suzuki would appears as a suggestion.

I've tried to put toLowerCase() on some possible places (that I can think of) but still not getting a proper solution.
replace :
if(ac[i].name == value) {

Open in new window

by :
if(ac[i].name.toLowerCase() == value.toLowerCase()) {

Open in new window

Avatar of tobece

ASKER

Actually that was where I placed toLowerCase() but seems like nothing changes?

Typed su (all lowercase) : Suggestion NONE
Typed Su : Suggestion Suzuki
Typed SU (all uppercase) : Suggestion NONE
Look like the autocomplete type cell don't support that :
http://handsontable.com/demo/autocomplete.html

you should ask the developer to add this in their plugin as I don't see any solution outside the plugin
Avatar of tobece

ASKER

@leakim971:
OK thanks for the codes.
I'll be contacting them regarding the issue of lowercase letters in autocomplete.