Xpages: TypeAhead with Twitter Bootstrap - Loading a SSJS Array into the value list

Question

i was trying to add BootsTrap Typeahead to one of my Xpages. So i imported all the Bootstrap stuff to my application. When i put the values "hardcoded" into the list, it works perfectly. But i created an array of "Values" in a SSJS Library.

Can you tell me how i can put that array from the SSJS Lib to the value list of typeahead?

<xp:inputText id="inputText1" styleClass="typeahead"></xp:inputText>

<script>
var value = ['test', 'birthday']
$('.typeahead').typeahead({source: value });
</script>   

Thanks

Answer 1

The typeahead component has been removed in Bootstrap 3 in favour of Twitter's typeahead library. It does work in Bootstrap 2.3.2.

Anyway. You'll need to use an xp:scriptBlock control to be able to reference server side variables. My first reaction would be to do this:

<xp:this.beforePageLoad>
  <![CDATA[
   #{javascript:viewScope.put("typeaheadOptions", ["Alabama", "Alaska"] );}
  ]]>
</xp:this.beforePageLoad>

<xp:inputText
    id="inputText1"
    styleClass="typeahead"></xp:inputText>

<xp:scriptBlock
    id="scriptBlock1">
    <xp:this.value><![CDATA[
      var value = #{viewScope.typeaheadOptions};
      $('.typeahead').typeahead({source: value });
    ]]></xp:this.value>
</xp:scriptBlock>

But that didn't work: you will end up with javascript that look like this:

var value = [Alabama, Alaska];

Notice the missing quotes around the entries.

To solve that you can wrap the variable in a toJson function before storing it.

<xp:this.beforePageLoad>
  <![CDATA[
   #{javascript:viewScope.put("typeaheadOptions", toJson(["Alabama", "Alaska"]) );}
  ]]>
</xp:this.beforePageLoad>