Name

<fb:typeahead-input/>

Synopsis

<fb:fbml version="1.1"><fb:typeahead-input name="...">...
    <fb:typeahead-option value="...">...</fb:typeahead-option>
    </fb:typeahead-input></fb:fbml>

Renders a type-ahead text input box that autodetects what the user is typing and tries to match a drop-down menu of options with what the user is typing. A good example of this can be seen in the search box in the upper-left corner of the Facebook site. At the time of this writing, this tag is currently in beta and therefore requires the <fb:fbml version="1.1"/> tags wrapped around it.

FBML-Specific Attributes

Required

name=[string] default: none

The name to submit in the POST request with the form. The selected value in the input box will be passed with this name.

Optional

autocomplete=[on|off] default: on

If on, allows the browser’s autocomplete functions to override the autocomplete of the <fb:typeahead-input/> tag. It is recommended that you set this to off to override the browser functionality.

value=[string] default: none

The default value to include in the input box when the page loads. Note that it doesn’t translate to the text of the <fb:typeahead-option/> box it corresponds to.

Example FBML

Here is example FBML code for <fb:typeahead-input/>:

<form>
<fb:fbml version="1.1">
  <fb:typeahead-input name="name" autocomplete="off" value="mark">
    <fb:typeahead-option value="jesse">Jesse Stay</fb:typeahead-option>
    <fb:typeahead-option value="mark">Mark Zuckerberg</fb:typeahead-option>
    <fb:typeahead-option value="nick">Nick O'Neill</fb:typeahead-option>
  </fb:typeahead-input>
</fb:fbml>
</form>

Rendered HTML for Single Instance of Tag

The underlying HTML when rendered looks like this (Figure 3-36 shows the result):

<form>
<input type="hidden" name="name_val" id="name_val" />
<input name="name" autocomplete="off" value="mark" class="inputtext" 
  onfocus="var source = new custom_source(
    [{&quot;i&quot;:&quot;jesse&quot;,&quot;t&quot;:&quot;
    Jesse Stay&quot;},{&quot;i&quot;:&quot;mark&quot;,&quot;
    t&quot;:&quot;Mark Zuckerberg&quot;},{&quot;i&quot;:&quot;
    nick&quot;,&quot;t&quot;:&quot;Nick O&#039;Neill&quot;}]); 
    source.text_placeholder = null; 
    var ta = new typeaheadpro(this, source, {onselect: function(
    row) { $(&quot;name_val&quot;).value = row.i; ; }});">
</form>
The result of our <fb:typeahead-input/> example
Figure 3-36. The result of our <fb:typeahead-input/> example

Additional Information

  • Be sure to include this tag within a <form/> tag to have it submit with the form (or use FBJS).

  • This tag must be included within an <fbml version="1.1"/> set of tags.

  • This tag is currently under beta at the time of this writing.

  • If none of the options are selected, the text entered in the input box gets sent back to the form.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.223.237.131