Salesforce: 输入框提示的实现

技术文章 1年前 (2020) 完美者
1,094 0

标签:key   padding   sha   代码   input   max   nowrap   lock   下载   

首先要从网站上下载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: ‘, ‘}
);

 

 

 

 

Salesforce: 输入框提示的实现

标签:key   padding   sha   代码   input   max   nowrap   lock   下载   

原文地址:https://www.cnblogs.com/clsriz/p/13638068.html

版权声明:完美者 发表于 2020-09-17 19:29:50。
转载请注明:Salesforce: 输入框提示的实现 | 完美导航

暂无评论

暂无评论...