<apex:page standardController="account" id="page">
<apex:includeScript value="//cdn.jsdelivr.net/jquery/1.7/jquery.min.js" />
<apex:includeScript value="//cdn.jsdelivr.net/jquery.colresizable/1.3/colResizable.min.js" />
<apex:includeScript value="{!URLFOR($Resource.JqueryA, 'js/jquery-ui-1.8.16.custom.min.js')}" />
<!-- <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
<apex:includeScript value="{!URLFOR($Resource.select2, 'select2/select2.js')}"/>-->
<apex:form id="form1">
<br />
<apex:outputpanel id="counter1">
<apex:pageBlock id="block1">
<apex:pageBlockSection id="section1">
<c:AutoCompleteV2 allowClear="true" id="d" importJquery="true" labelField="name" SObject="account" valuefield="name" targetField="{!account.name}" />
</apex:pageBlockSection>
</apex:pageBlock>
<apex:commandButton reRender="none" value="Get value" />
<b><a href="#" onClick="clearValue()"><apex:commandButton value="Reset" onclick="this.form1.reset();return true;" rerender="counter1"/></a> </b>
</apex:outputpanel>
</apex:form>
<script type="text/javascript">
function clearValue() {
//alert($("input[id$='d']").val());
$("input[id$='d']").val('');
}
</script>
</apex:page>
Visualforce组件：
<apex:component controller="AutoCompleteV2_Con" selfClosing="true">
<apex:attribute name="SObject" description="SOQL Object to query" type="String" assignTo="{!sObjVal}" required="true" />
<apex:attribute name="labelField" description="API Name of Field to display for label" type="String" required="true" assignTo="{!labelFieldVar}" />
<apex:attribute name="valueField" description="API Name of Field to display for value that is passed to the targetField" type="String" required="true" assignTo="{!valueFieldVar}" />
<apex:attribute name="targetField" description="Field of current object that will hold the selection." type="Object" assignTo="{!targetFieldVar}" />
<apex:attribute name="inputFieldId" description="Id of the field where the value will copied[Not generally required, used when you need to copy value to a field using js]" type="String" />
<apex:attribute name="importJquery" description="Assign false if you dont want to jquery files" type="Boolean" default="true" />
<apex:attribute name="syncManualEntry" description="Allow manual entry of data from autocomplete component." type="Boolean" default="true" />
<apex:attribute name="allowClear" description="Set true to give user a option to clear existing value" type="Boolean" default="true" />
<apex:attribute name="Style" description="style for the input component" type="String" />
<!--Required js files-->
<apex:outputPanel rendered="{!importJquery}">
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
</apex:outputPanel>
<apex:includeScript value="{!URLFOR($Resource.select2, 'select2/select2.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.select2, 'select2/select2.css')}" />
<script>
var v2 {
!randomJsIden
}
var prevVal {
!randomJsIden
};
function autocompleteV2 {
!randomJsIden
}() {
var v2 = this;
jQuery(function($) { //on document.ready
v2.init($)
});
}
autocompleteV2 {
!randomJsIden
}.prototype = {
init: function($) {
var $elem = $(".auto{!randomJsIden}").select2({
minimumInputLength: 1,
placeholder: "No value selected",
allowClear: {!allowClear
},
query: function(query) {
queryData {
!randomJsIden
}(query);
},
createSearchChoice: function(term, data) {
if ({!syncManualEntry
} == true) {
return {
id: term,
text: term
};
}
}
});
$elem.on("select2-selecting", function(e) {
$('.hiddenField{!randomJsIden}').val(e.val);
});
$elem.on("select2-removed", function(e) {
$('.hiddenField{!randomJsIden}').val('');
});
if ('{!cacheField}' != '') {
$elem.select2("data", {
id: "{!targetFieldVar}",
text: "{!cacheField}"
})
}
},
triggerSearch: function(val) {
if (prevVal {
!randomJsIden
} != val) {
$ = jQuery;
prevVal {
!randomJsIden
} = val;
var select = $('input.auto{!randomJsIden}');
var search = $('.select2-input')
select.select2('open');
search.val(val);
search.trigger("input");
}
}
}
/*
*This method queries data according to the passed parameter
*and populates the combobox accordingly
***/
function queryData {
!randomJsIden
}(query) {
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.AutoCompleteV2_Con.getData}', '{!sObjVal}', '{!labelFieldVar}', '{!valueFieldVar}', query.term,
function(result, event) {
//if success
if (event.status) {
var data = {
results: []
}
data.results = result;
query.callback(data);
} else {
alert('Invalid Field/Object API Name : ' + event.message);
}
}, {
escape: true
}
);
}
</script>
<apex:inputText style="{!Style}" styleClass="auto{!randomJsIden}" value="{!cacheField}" />
<apex:outputPanel id="hiddenPanel">
<apex:inputText value="{!targetField}" id="hiddenField" styleClass="hiddenField{!randomJsIden}" style="display:none" />
</apex:outputPanel>
<script>
v2 {
!randomJsIden
} = new autocompleteV2 {
!randomJsIden
}({});
</script>
</apex:component>
脚本：
<script type="text/javascript">
function clearValue() {
//alert($("input[id$='d']").val());
$("input[id$='d']").val('');
}
</script>
我能够获得价值但是，我无法清除价值。
我在后面的visualforce组件级别使用select2组件。
我在visualforce页面上使用visualforce组件显示自动完成功能.cant能够使用按钮重置值。
答案 0 :(得分：0)
我使用了它并且它可以工作
$("input[id=d]").val("");
让我知道它是否适合你。