Estoy tratando de conseguir jQueryUI de Autocompletar para desencadenar en la creación dinámica de la forma de entrada de los elementos, pero no de trabajo. He intentado usar keyup.autocompletar y keydown.autocompletar como enlazar eventos en $.live(), pero es vinculante para los nuevos elementos – sólo los que ya están en la página.

Probar el código aquí (intente escribir «ava» en la primera entrada, a continuación, haga clic en «Agregar Entrada» y el tipo de la misma en la nueva entrada).

JavaScript:

$(function() {
    $("input#addButton").click(function() {
        $("input.searchInput:last").clone(true).appendTo($(this).closest("form"));
        $("input.searchInput:last").val("");

    })

    $("input.searchInput").live("keydown.autocomplete", function() {
        $(this).autocomplete({
            source: [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
                ],

            minLength: 2
        });
    })
});

HTML:

<form name="myForm" method="post">
    <input id="addButton" name="addButton" type="button" value="Add an input" />
    <input name="search" value="" class="searchInput" maxlength="20" />
</form>
  • Sólo por curiosidad, ¿has probado a ejecutar la unión cada vez que un control es creado por el objeto específico creado? Buen punto de partida para la solución de problemas…
  • sí, lo hice – jsfiddle.net/6t74T/2 – el mismo resultado.
  • Su violín (jsfiddle.net/6t74T/1) a mi me funciona en Chrome. Puedo obtener la función autocompletar en el agregado de la caja así.
  • Tienes razón… funciona en IE8 demasiado. Hmmm Debe ser un IE9 problema, entonces….
  • Esto funciona en IE8 sólo cuando reinicio el enlace después de la entrada de nuevo es creado – jsfiddle.net/6t74T/2. El jsfiddle funciona, pero no es mi código real…
  • Yo creo que esto tiene algo que ver con el clone() – no parece ser la copia de los controladores – incluso cuando se especifica withDataAndEvents Y deepWithDataAndEvents.

InformationsquelleAutor Eric Belair | 2011-07-12

2 Comentarios

  1. 42

    Función .live() es obsoleto ahora.

    Se ve como el código de como funciona esto:

    var options = {
        source: ["ActionScript", "AppleScript"],
        minLength: 2
    };
    var selector = 'input.searchInput';
    $(document).on('keydown.autocomplete', selector, function() {
        $(this).autocomplete(options);
    });
    • cambiar aceptado responder ya que este es compatible con las nuevas versiones.
    • Gracias por esto! Sólo me ayudó con un anidada campos de formulario problema en Rails 3.2 tratando de obtener la función autocompletar de trabajo!
    • Hola @Andrei, puedes echar un vistazo a stackoverflow.com/questions/33410824/… también pls. Gracias
    • Casi trabajó para mí, he tenido que cambiar de $(this).autocomplete(options); a $(this).autocomplete({source : options}); aunque.
    • aceptado respuesta <3
  2. 11

    Esto funciona:

    JS:

    $(function() {
      var options = {
        source: [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
          "Groovy",
          "Haskell",
          "Java",
          "JavaScript",
          "Lisp",
          "Perl",
          "PHP",
          "Python",
          "Ruby",
          "Scala",
          "Scheme"
        ],
        minLength: 2
      };
    
      $("input.searchInput").live("keydown.autocomplete", function() {
        $(this).autocomplete(options);
      });
    
      var addInput = function() {
        var inputHTML = " <input name='search' value='' class='searchInput' maxlength='20' />";
        $(inputHTML).appendTo("form#myForm");
        $("input.searchInput:last").focus();
      };
    
      if (!$("form#myForm").find("input.searchInput").length) {
        addInput();
      }
    
      $("input#addButton").click(addInput);
    });

    HTML:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <form id="myForm" name="myForm" method="post">
      <input id="addButton" name="addButton" type="button" value="Add an input" />
    </form>

Dejar respuesta

Please enter your comment!
Please enter your name here