A complete example of autocomplete that does not work in JQuery-UI dialog

A complete example of autocomplete that does not work in JQuery-UI dialog

Note: I have removed everything except what I want to ask about.

Here Is an complete example of code where autocomplete doesn't work when used in JQuery-UI dialog.
The code works like this.
1.When you start you can focus in the text field and press for example button a now the autocomple works a list is displayed because you are NOT in a JQuery-UI dialog.
2. Cick the button New Voyage. This will display a JQuery-UI dialog.
3. Focus in the text field VesselID and press a autocomplete doesn't display a list because you are now in a JQuery-UI dialog.

4.What code do I need to add to get autocomplete to work in a JQuery-UI dialog.



Here is the complete code and markup
*********************************************
<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <link href="../JavaScript/jquery/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />   
    <script src="../JavaScript/jquery/jquery.js" type="text/javascript" />
    <script src="../JavaScript/jquery/ui/jquery-ui.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
 
    <script type="text/javascript">
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme",
            "Oslo",
            "Paris",
            "svanljunga",
            "Stockolm",
            "svan",
            "sunne",
            "Säffle",
            "Göteborg",
            "Berlin",
            "sunesljul",
            "sunessommar"
            ];

       function Click_NewVoyage()
       {
           $("#dlgNewVoyage").dialog({
               width: 900
           });
       }

       $(function ()
       {
           $("#foo1").autocomplete({
               source: availableTags
           });

           $("#foo2").autocomplete({
               source: availableTags
           });

           $("#newVoyage").click(Click_NewVoyage);
       });

    </script>
</head>

<body>
   <div id="voyage">
       <input id="newVoyage" type="button" value="New Voyage" />
       <input type="Text" id="foo1" size="18"/>
   </div>

    <div id="dlgNewVoyage" title="New Voyage" style="width:900px; display:none">
       <br />
       <table>
          <tr><th> VesselID: </th></tr>
          <tr><td> <input type="Text" id="vesselID" size="6" /> </td></tr>
       </table>
    </div>

    <div id="dlgSearchAFARTYG" title="SearchAFARTYG" style="width:700px; display:none">
       <table>
          <thead><tr><th>Vessel name</th></tr></thead>
          <tr><td><input type="Text" id="foo2" size="18"/></td></tr>
       </table>
    </div>
</body>
</html>

 //Tony