Xpages: TypeAhead with Twitter Bootstrap -加载一个SSJS数组到值列表

Question

我试图添加BootsTrap Typeahead到我的一个Xpages。所以我导入了所有的Bootstrap的东西到我的应用程序。当我把值"硬编码"到列表中，它工作完美。但是我在SSJS库中创建了一个"值"数组。

你能告诉我如何把数组从SSJS库到typeahead的值列表吗?

<xp:inputText id="inputText1" styleClass="typeahead"></xp:inputText>
<script>
var value = ['test', 'birthday']
$('.typeahead').typeahead({source: value });
</script>   

谢谢

Answer 1

typeahead组件已在Bootstrap 3中删除，以支持Twitter的typeahead库。它可以在Bootstrap 2.3.2中工作。

。您需要使用xp:scriptBlock控件来引用服务器端变量。我的第一反应是这样做:

<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>

但是这不起作用:你最终会得到这样的javascript:

var value = [Alabama, Alaska];

注意条目周围缺少引号。

为了解决这个问题，您可以在存储变量之前将其封装在toJson函数中。

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