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

时间:2017-05-03 02:38:16

标签: jquery ajax autocomplete jquery-ui-autocomplete dhtmlx

您好我在我的应用程序中使用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.);                        
                  }
               });
              }
           });

1 个答案:

答案 0 :(得分:0)

好吧,我从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
             });
           });
        });