Autocomplete suggestions not working for input textbox in dhtmlxform using ajax

Question

Hi I'm using dhtmlx form in my application. When a user enters a text in a textbox, I want the autocomplete suggestions to comeup from my database, which I can see on console. But its not displaying as suggestions list below this input box. Please suggest how I can make this work......

In the header part-

 <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>

In the script part----

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

Well, I got an answer from dhtmlx team that they do not support autocomplete feature for dhtmlx input box, but its already in use for dhtmlx combo.

So I figured out an alternative way. Defining the input box as a html text box instead of dhtmlx. To it, add JQuery and ajax. It works like a charm. I really hope the dhtmlx team provide us with an autocomplete functionality for a text box.

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
             });
           });
        });