Salesforce: 输入框提示的实现

首先要从网站上下载js包，参考网址：http://www.enjoyxstudy.com/javascript/suggest/index.en.html

然后将js包存储在static resource中，并加载到页面上：

<apex:includeScript value="{!URLFOR($Resource.Resource, '/Resource/js/suggest.js')}"/>

然后可根据自身需求配置suggest的样式，参考代码：

.suggest {
　　position: absolute;
　　background-color: #FFFFFF;
　　border: 1px solid #CCCCFF;
　　width: auto;
　　min-width: 130px;
　　max-height: 200px;
　　overflow-y: auto;
　　overflow-x:hidden;
　　background-color: #fff;
　　border: 1px solid rgba(0, 0, 0, 0.2);
　　-webkit-border-radius: 0px;
　　-moz-border-radius: 0px;
　　border-radius: 0px;
　　-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
　　-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
　　box-shadow: 0 5px 10px rgba(0,0,0,.2);
　　z-index: 1;
}
.suggest div {
　　display: block;
　　width: auto;
　　overflow: hidden;
　　white-space: nowrap;
　　padding: 9px 20px;
}
.suggest div.select{ /* keydown, keyup */
　　color: #fff;
　　background-color: #0097cf;
}
.suggest div.over{ /* mouse over */
　　color: #fff;
　　background-color: #0097cf;
}

 

然后在页面中的输入框下添加suggest元素：

<apex:inputField value="{!IO.Test__c}" styleClass="test/>

<div class="suggest" style="display:none;"></div>

最后添加JS代码在页面加载时为suggest赋值：

new Suggest.Local(

　　j$('.test')[0],

　　j$('.test').next()[0],

　　new Array('15', '30', '45', '60', '75', '90'),

　　{dispMax: 100000, interval: 10, prefix: false, highlight: true, dispAllKey: true, delim: ', '}

);

也可将其变为多选suggest(从suggest选择一个值后，在输入框中会自动为已选值添加一个逗号，输入空格后，可再次从suggest中选择值)：

new Suggest.LocalMulti(

　　j$('.test')[0],

　　j$('.test').next()[0],

　　new Array('15', '30', '45', '60', '75', '90'),

　　{dispMax: 100000, interval: 10, prefix: false, highlight: true, dispAllKey: true, delim: ', '}

);