在选择值之前触发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屋！