自动完成建议不适用于使用 ajax 的 dhtmlxform 中的输入文本框

Question

您好，我在我的应用程序中使用 dhtmlx 表单。当用户在文本框中输入文本时，我希望自动完成建议从我的数据库中出现，我可以在控制台上看到。但它没有显示为此输入框下方的建议列表。请建议我如何使这项工作......

在标题部分-

 <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css"   href="dhtmlx/dhtmlxSuitePRO/codebase/dhtmlx.css" />
    <link rel="stylesheet" href="dhtmlx/dhtmlxScheduler/codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script src="dhtmlx/dhtmlxSuitePRO/codebase/dhtmlx.js"></script>
    <script src="dhtmlx/dhtmlxScheduler/codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
    <script src='dhtmlx/dhtmlxScheduler/codebase/ext/dhtmlxscheduler_tooltip.js' type="text/javascript" charset="utf-8"></script>
    <script src="dhtmlx/dhtmlxScheduler/codebase/ext/dhtmlxscheduler_all_timed.js" type="text/javascript" charset="utf-8"></script>
    <script src="dhtmlx/dhtmlxScheduler/codebase/ext/dhtmlxscheduler_minical.js" type="text/javascript" charset="utf-8"></script>
    <script src="dhtmlx/dhtmlxScheduler/codebase/ext/dhtmlxscheduler_serialize.js" type="text/javascript" charset="utf-8"></script>

在脚本部分----

var layoutObj6 = document.getElementById("layoutObj6");
myLayout6.cells("a").setText(" Impersonation:");
myImpersonationFormData =    [
            {type: "block", list:[
            {type: "input", name: "txtImpersonate", id: "txtImpersonate", offsetLeft: 0, inputWidth: 125},
            {type: "newcolumn"},
            {type: "button", value: "Set", name: "btn_impersonate", id: "btn_impersonate", width: 20}
            ]}
            ];

 myImpersonationForm = 
 myLayout6.cells("a").attachForm(myImpersonationFormData);
 myLayout.cells("a").appendObject(layoutObj6);
 myImpersonationForm.attachEvent("onInputChange", function (name, value,myImpersonationForm){
 if(name == 'txtImpersonate'){
        $.ajax({
              url : "/MyProject/GetUserList",
              type : "GET",
              data : { user : value},
              dataType : "jsonp",
              success : function(data) {
                  response(data.userList);// can see the list in browser console
                  },   
              error: function(jqXHR, textStatus, errorThrown){
                 alert("ERROR!!! \n \n System Error code: " + jqXHR.status + "\n \n Please contact Server administrator.);                        
                  }
               });
              }
           });

Answer 1

嗯，我得到了 dhtmlx 团队的答复，他们不支持 dhtmlx 输入框的自动完成功能，但它已经用于 dhtmlx 组合。

所以我想出了另一种方法。将输入框定义为 html 文本框而不是 dhtmlx。向它添加 JQuery 和 ajax。它就像一个魅力。 我真的希望 dhtmlx 团队为我们提供文本框的自动完成功能。

myImpersonationForm = myLayout6.cells("a").attachHTMLString('<input type="text" class="inputTextClass" id = "txtImpersonate" name ="txtImpersonate" />'
+' <button id="btn_impersonate" class="btnSetClass" name="btn_impersonate" onclick="javascript:fnImpersonateSet();">Set</button></form> ');
 $(document).ready(function() {
            window.history.forward(1); 
            $(function() {
                $("#txtImpersonate").autocomplete({
                        source : function(request,response) {
                        if (request.term.length < 3) {
                            //don't do anything
                            return;
                        }
                      $.ajax({
                            url : imUrl,
                            type : "GET",
                            data : { user : request.term},
                            dataType : "jsonp",
                            success : function(data) {
                            response(data.userList);
                          },   
                        error: function(jqXHR, textStatus, errorThrown){
                                alert("ERROR!!! \n \n System Error code: " + jqXHR.status + "\n \n Please contact your Server administrator. ");                        
                         }
                      });
                },
                autoFocus : true,
                scroll : true
             });
           });
        });