在选择值之前触发Change事件 [英] Change event fires before selecting a value
问题描述
我已经使用以下代码实现了自动完成选项.当用户键入文本时,我使用了文件字段中的文本框来显示选项.
I have implemented auto complete option with the below code. I used a textbox from a filed to show options as an when users typed in the text.
<script language="javascript" src="https://Domain.sharepoint.com/SiteAssets/jquery-1.12.0.min.js" type="text/javascript">
</script>
<script language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function () {
$().SPServices.SPAutocomplete({
sourceList: "VisionData",
sourceColumn: "Project_x0020_Name",
columnName: "RFS",
ignoreCase: true,
numChars: 2,
slideDownSpeed: 'fast'
});
});
</script>
<script type="text/javascript">
$(function () {
$("input[title='RFS']").change(function () {
// alert("field changed.");
var clientContext = new SP.ClientContext();
var oList = clientContext.get_web().get_lists().getByTitle('VisionData');
var camlQuery = new SP.CamlQuery();
alert(document.getElementById("RFS_158b1259-dd99-4201-9c57-41b162954c10_$TextField").value);
camlQuery.set_viewXml("<View><Query> <Where><Eq><FieldRef Name='Project_x0020_Name' /><Value Type='Text'>" + document.getElementById("RFS_158b1259-dd99-4201-9c57-41b162954c10_$TextField").value + "</Value> </Eq></Where></Query></View>");
collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(onQuerySucceeded11, onQueryFailed11);
function onQuerySucceeded11(sender, args) {
var listItemInfo = '';
// alert("success");
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
// alert(oListItem.get_item('Project_x0020_Name'));
document.getElementById("ProjectName_3cb17388-5fe3-4c99-b0ff-f0a6609dce96_$TextField").value = oListItem.get_item('Project_x0020_Name');
document.getElementById("Principal_7d44c63d-9340-4703-8504-9a0fffa6196d_$TextField").value = oListItem.get_item('Principal');
//document.getElementById("Principal_7d44c63d-9340-4703-8504-9a0fffa6196d_$TextField").value =
//document.getElementById("Principal_7d44c63d-9340-4703-8504-9a0fffa6196d_$TextField").value =
// alert(oListItem.get_item('Principal'));
alert(oListItem.get_item('Status'));
break;
}
// alert(listItemInfo.toString());
}
function onQueryFailed11(sender, args) {
alert('Request failed. ' + args.get_message() +
'\n' + args.get_stackTrace());
}
});
});
</script>
此问题是我单击事件触发下拉菜单中的建议后,我无法选择文本框中显示的建议.
The problem with this is i am not able to select the suggestions shown in the textbox as soon as i click on the suggestions in the drop down the event fires.
例如,当我键入" bost"时, ,它将显示 在波士顿的建议中,当我移动鼠标并单击波士顿"时,将触发change事件,最终我将在文本框中输入值bost.
For example when i type "bost" it will show Boston in the suggestion when i move the mouse and click on Boston the change event fires and i will end up having the value bost in the text box.
(我使用此值自动填充表单中其余字段.
(i use this value to auto-populate the rest of the field in the form.
推荐答案
我们可以使用autocomplete代替SPAutocomplete,并使用"select"或自动更改中的更改"属性,以达到您的要求.以下代码供您参考:
We can use autocomplete to instead of SPAutocomplete, and use "select" or "change" property in autocomplete to achieve your requirement. The code below for your reference:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
(document).ready(function(){ var itemSource = []; var k = 0;
(document).ready(function () { var itemSource=[]; var k=0;
().SPServices({ 操作:"GetListItems", 异步:错误, listName:"VisionData", CAMLViewFields:'< ViewFields>< FieldRef Name = \'Project_x0020_Name \'/></ViewFields>', CAMLQuery:< Query>< OrderBy>< FieldRef Name = \'Project_x0020_Name \'Ascending = \'True \'/></OrderBy></Query>', completefunc:function(xData,Status){
().SPServices({ operation: "GetListItems", async: false, listName: "VisionData", CAMLViewFields: '<ViewFields><FieldRef Name=\'Project_x0020_Name\'/></ViewFields>', CAMLQuery: '<Query><OrderBy><FieldRef Name=\'Project_x0020_Name\' Ascending=\'True\' /></OrderBy></Query>', completefunc: function(xData, Status) {
这篇关于在选择值之前触发Change事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!