Why my Autocomplate not work in Dialog?

Why my Autocomplate not work in Dialog?

I have dialog that contain autocomplate.

    1. <html>
      <head>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
         <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
         <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script>
            
          <style type="text/css">
         label, input {
              display: block;
          }

          input.text {
              margin-bottom: 12px;
              width: 95%;
              padding: .4em;
          }

          fieldset {
              padding: 10px 10px 10px 10px;
              border: 2;
              border-style: solid #fff;
              margin-top: 25px;
          }

          h1 {
              font-size: 1.2em;
              margin: .6em 0;
          }

          div#users-contain {
              width: 100%;
              margin: 20px 0;
          }

          div#users-contain table {
              margin: 1em 0;
              border-collapse: collapse;
              width: 100%;
          }

          div#users-contain table td, div#users-contain table th {
             border: 1px solid #eee;
              padding: .6em 10px;
              text-align: left;
          }

          .ui-dialog .ui-state-error {
              padding: .3em;
          }

          .validateTips {
              border: 1px solid transparent;
              padding: 0.3em;
          }

          #dialog-form {
              display: none;
          }

              </style>

      </head>

      <body>
      <!-- dialog -->
        <div id="dialog-form" title="Tambah Petugas">
          
        <form>
      <fieldset>

      <label for="cari">Cari :</label>
      <input type="text" name="cari" id="cari" value="" class="text ui-widget-content ui-corner-all" />

      </fieldset>               

      </form>
      </div>
         
      <div id="users-contain" class="ui-widget">
          <button id="create-user">Tambah Petugas</button>
      </div>


      <!-- js -->

      <script type="text/javascript">
      $(function () {

      <!-- new dialog -->   
          var new_dialog = function (type, row) {
              var dlg = $("#dialog-form").clone();

              var config = {
                  autoOpen: true,
                  height: 500,
                  width: 700,
                  modal: true,
                  buttons: {
                         "Add": save_data,

                         "Cancel": function () {
                             dlg.dialog("close");
                              }
                          },

                  close: function () {
                        dlg.remove();
                     }
                  };


                  dlg.dialog(config);


                  function save_data() {

                  $( "#users tbody" ).load( "load.php?");
                      dlg.dialog("close");
                  }

           };


                  $( "#cari" ).autocomplete({
                          source: [ "one", "two", "three" , "four" , "five", "six"]
                  });

          <!-- button click create-user -->
          $("#create-user").button().click(new_dialog);
      });

      </script>


      </body>
      </html>











































































































































    what is my mistake? what should i do ?

    thanks a lot for your help.