Question

I have a question about how to collaborate auto complete with UI dialog:

1. There is an input text which enables autocomplete (the data is not a simple string array, so it needs to be parsed). This job is well done:

   <input type="text" id="styleno" name="styleno" >
   
   $("#styleno").autocomplete("${suggest}", {
                   parse:function(raw){
                var parsed = [];
                for (var i=0; i < raw.model.length; i++) {    
   
                   var row = raw.model[i];
                   parsed.push({
                       data: row,
                      value: row,
                     result: row.styleNo
                   });
                }
                return parsed;
   
           },
           formatMatch: function(row, i, max) {
                    return row.styleNo;
                   },
                   formatItem: function(data, i, n, value) {
                   //
   
                           return  data.id+data.styleNo;
                   }
           });
   

2. When a result is selected from the suggested list, I want to open a dialog, populate somethings from the parsed the result. So I use the “result” function:

   $("#styleno").result(function(data,values){
           $('#itemDiv').dialog('open');
   }
   

   The dialog is opened, but the focus is kept on the auto suggested input field (<input type="text" id="styleno" name="styleno" >). So I use this code:

   $("#styleno").trigger("unautocomplete");
   

   Now the dialog is fine, but the input field lost its autosuggestion capability.

What shall I do? According to the selected item from suggestion list, then pop up a dialog with some input field. After user fills the field in the dialog, close it, get back to auto suggested field still use the auto suggestion function.

Answer 1

Not 100% sure it works like this, but you might try the following:

$("#styleno").blur();

Sounds like the event you are looking for.