Typehead textbox using 'text input' block

[Metri Dev]

I am trying to create custom block for 'typeahead' support. Please find the attached screenshot.

Here is the  Custom Block. Can someone help me understand how to capture stroke events from within text input and return suggestion?.

Thanks!

[Rachel Fenichel]

Sounds like you want some combination of FieldDropdown and FieldTextInput.  FieldTextInput's key stroke handling is here: https://github.com/google/blockly/blob/master/core/field_textinput.js#L173

Docs for those two fields are here https://developers.google.com/blockly/guides/create-custom-blocks/define-blocks#drop-down_field and here https://developers.google.com/blockly/guides/create-custom-blocks/define-blocks#text_field.

Rachel

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[phil cleaver]

The way you want to do it is wih the datalist HTML5 element - it does all the hard work for you.

http://blog.teamtreehouse.com/creating-autocomplete-dropdowns-datalist-element

I used it in one of my custom fields and it works great.

You need to create your own new field and use something like this code for it's showEditor function.... 

Blockly.FieldHtml.prototype.showEditor_ = function(opt_quietInput) {

  this.workspace_ = this.sourceBlock_.workspace;

  var quietInput = opt_quietInput || false;

  if (!quietInput && (goog.userAgent.MOBILE || goog.userAgent.ANDROID ||

                      goog.userAgent.IPAD)) {

    // Mobile browsers have issues with in-line textareas (focus & keyboards).

    var newValue = window.prompt(Blockly.Msg.CHANGE_VALUE_TITLE, this.text_);

    if (this.sourceBlock_) {

      newValue = this.callValidator(newValue);

    }

    this.setValue(newValue);

    return;

  } 

  Blockly.WidgetDiv.show(this, this.sourceBlock_.RTL, this.widgetDispose_());

  var div = Blockly.WidgetDiv.DIV;

  // Create the input.

  var htmlInput = 

      goog.dom.createDom(goog.dom.TagName.INPUT, 'blocklyHtmlInput');

//   htmlInput.setAttribute('spellcheck', this.spellcheck_);

  var fontSize =

      (Blockly.FieldHtml.FONTSIZE * this.workspace_.scale) + 'pt';

  div.style.fontSize = fontSize;

  htmlInput.style.fontSize = fontSize;

  var datalist = goog.dom.createDom(goog.dom.TagName.DATALIST);

  for (var i=0; i < this.autovalues_.length; i++) {

    var option = goog.dom.createDom(goog.dom.TagName.OPTION);

    option.setAttribute('value', this.autovalues_[i])

    datalist.appendChild(option);

  }

  datalist.setAttribute('id', 'datalist');

  htmlInput.setAttribute('list', 'datalist')

  /** @type {!HTMLInputElement} */

  Blockly.FieldHtml.htmlInput_ = htmlInput;

  div.appendChild(datalist);

  div.appendChild(htmlInput);

  htmlInput.value = htmlInput.defaultValue = this.text_;

  htmlInput.oldValue_ = null;

  this.validate_();

  this.resizeEditor_();

  if (!quietInput) {

    htmlInput.focus();

     htmlInput.select();

  }

  // Bind to keydown -- trap Enter without IME and Esc to hide.

  htmlInput.onKeyDownWrapper_ =

      Blockly.bindEventWithChecks_(htmlInput, 'keydown', this,

      this.onHtmlInputKeyDown_);

  // Bind to keyup -- trap Enter; resize after every keystroke.

  htmlInput.onKeyUpWrapper_ =

      Blockly.bindEventWithChecks_(htmlInput, 'keyup', this,

      this.onHtmlInputChange_);

  // Bind to keyPress -- repeatedly resize when holding down a key.

  htmlInput.onKeyPressWrapper_ =

      Blockly.bindEventWithChecks_(htmlInput, 'keypress', this,

      this.onHtmlInputChange_);

  htmlInput.onWorkspaceChangeWrapper_ = this.resizeEditor_.bind(this);

  this.workspace_.addChangeListener(htmlInput.onWorkspaceChangeWrapper_);

};

[Rachel Fenichel]

Note that datalist isn't supported on Safari or iOS Safari and has partial support otherwise: http://caniuse.com/#search=datalist

Partial support may be fine for what you're doing, but you will want to check out the bug lists to be sure.

--

[Aneesh Kashalikar]

How did you incorporate new FieldHtml in defining the blocks? Not exactly sure about that

[phil cleaver]

right...

in block.js around ln 1139

case 'field_html':

field = new Blockly.FieldHtml(element['text']);

blockly.js - 42

goog.require('Blockly.FieldHtml');

if you want it in the factory

factoryutils.js 112

} else if (field instanceof Blockly.FieldHtml) {

code.push(makeVar('tag', name) + " = block.getFieldValue('" + name + "');");

factoryutils.js 476

case 'field_html':

// Result: new Blockly.FieldHtml('Hello'), 'GREET'

fields.push('new Blockly.FieldHtml(' + JSON.stringify(block.getFieldValue('TEXT')) + '), ' + JSON.stringify(block.getFieldValue('FIELDNAME')));

break;

hope that works!

Virus-free. www.avg.com

--
You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/XBS1RIc5EHA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+unsubscribe@googlegroups.com.

[Aneesh Kashalikar]

Could you provide your project code showing how this works?  Not able to get the FieldHtml to work right. It throws some errors when I insert the code you have put.

To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.

[Aneesh Kashalikar]

Thanks for the idea of using a Datalist. For future users of a datalist: Copy the code in the Field text input file and change the name. Add a variable for the options to be included in the list in the constructor. Add the code where the goog.dom creates a datalist element and the div appends the element. Do this and you will have a custom field datalist.

On Monday, February 27, 2017 at 10:02:50 AM UTC-5, phil cleaver wrote:

[Arbaz Sheikh]

The custom typeahead block works fine by using Datalist but there is a bug. When you type in any other Input text field, it gets reflected in the typeahead block text field. Has anyone faced the same issue and is any there any solution to this?