如何使自动完成功能与附加字段一起使用?

时间:2016-01-25 19:55:18

标签: jquery jquery-ui append jquery-ui-autocomplete materialize

我已经读了好几天了,我还没弄明白这一点......我已经读过很多像我一样的问题,但它在我的代码中不起作用。 / p>

我必须知道一个人有多少度,所以,HR要求我使用很多字段,其中许多是必需的,我找到了一个附加功能,允许我创建更多字段,并且工作正常,在这些字段中有两个输入文本字段使用自动完成(我也使用物化库作为设计框架),它们工作得很好!但是当生成输入字段时它们不起作用,我可以使用把它们改成了一个班级而且没有工作......所以,这里是代码。

  $(document).ready(function(){
  $('#insteducativa').autocomplete({
  source:"instedu.php",
 minLength:3,
});
});

$(document).ready(function(){
$('#progracademico').autocomplete({
 source:"progracademico.php",
minLength:3,
});
});

$(document).ready(function() {
var max_fields2      = 5; //maximum input boxes allowed
var wrapper2         = $(".input_fields_wrap2"); //Fields wrapper
var add_button2      = $(".add_field_button2"); //Add button ID

var x = 1; //initlal text box count
$(add_button2).click(function(a){ //on add input button click
    a.preventDefault();
    if(x < max_fields2){ //max input box allowed
        x++; //text box increment
        $(wrapper2).append('<div><div class="row" id="cumples"><div class="input-field col s2"><label for="modacademica" class="active">Modalidad Academica</label><select class="browser-default" id="modacademica" name="modacademica[]"><option value="" Selected disabled>--seleccione--</option><?php $resultado2 = mysql_query("SELECT idmodalidadacademica, modalidadacademica from modalidadacademica ORDER BY idmodalidadacademica"); while ($fila2 = mysql_fetch_array($resultado2)) {echo "<option value=".$fila2["idmodalidadacademica"].">".utf8_encode($fila2["modalidadacademica"])."</option>";} ?></select></div><div class="input-field col s3"><input class="validate" type="text" class="insteducativa" name="insteducativa[]"><label for="insteducativa">Institución Educativa</label></div><div class="input-field col s3"><input class="validate" type="number" id="semaprobados" name="semaprobados[]" min="1" max="20"><label for="semaprobados">Semestres Aprobados</label></div><div class="input-field col s2"><select class="browser-default" id="graduado" name="graduado[]"><option value="" disabled selected>--</option><option value="1">Si</option><option value="0">No</option></select><label class="active" for="graduado">Graduado</label></div><div class="input-field col s2"><a class="waves-effect waves-light btn tooltipped red remove_field2"><i class="material-icons">clear</i></a></div></div><div class="row"><div class="input-field col s6"><input class="validate" type="text" id="progracademico" name="progracademico[]"><label for="progracademico">Nombre Programa Academico</label></div><div class="input-field col s3"><input type="date" id="fechaterminacion" name="fechaterminacion[]"><label class="active" for="fechaterminacion">Fecha Terminación</label></div><div class="input-field col s3"><input type="text" class="validate" pattern="[a-zA-Z0-9]{3,}" id="numtarjprof" name="numtarjprof[]"><label for="numtarjprof"># Tarjeta Profesional</label></div></div></div><div>');
    }
  });    

  $(wrapper2).on("click",".remove_field2", function(a){ //user click on remove text
       a.preventDefault(); $(this).parent('div').parent('div').parent('div').remove(); x--;
    })
});

这是HTML

<div class="card hoverable">
        <div class="card-content white">
          <i class="material-icons prefix">school</i>
          <span class="card-title center-align black-text text-black">Información Educativa Superior</span>
          <p>Ingrese su información de educación superior en <b>orden crónológico desde el más antiguo al más reciente</b>; si son cursos, diplomados etc. debe ingresar esta información en otro formulario.</p>
          <div class="input_fields_wrap2">
          <div class="row" id="cumples">
          <div class="input-field col s2">
                <label for="modacademica" class="active">Modalidad Academica</label>
                <select class="browser-default" id="modacademica" name="modacademica[]">
                  <option value="" Selected disabled>--seleccione--</option>
                    <?php
                      $resultado2 = mysql_query("SELECT idmodalidadacademica, modalidadacademica from modalidadacademica ORDER BY idmodalidadacademica");
                      while ($fila2 = mysql_fetch_array($resultado2)) {
                        echo "<option value=".$fila2['idmodalidadacademica'].">".utf8_encode($fila2['modalidadacademica'])."</option>";
                      }
                    ?>
                </select>
              </div>
              <div class="input-field col s3">
                <input class="validate" type="text" id="insteducativa" name="insteducativa[]">
                <label for="insteducativa">Institución Educativa</label>
              </div>
              <div class="input-field col s3">
                <input class="validate" type="number" id="semaprobados" name="semaprobados[]" min="1"
                max="20">
                <label for="semaprobados">Semestres Aprobados</label>
              </div>
            <div class="input-field col s2">
                <select class="browser-default" id="graduado" name="graduado[]">
                  <option value="" disabled selected>--</option>
                  <option value="1">Si</option>
                  <option value="0">No</option>
                </select>
                <label class="active" for="graduado">Graduado</label>
              </div>
              <div class="input-field col s2">
               <a class="waves-effect waves-light btn tooltipped blue add_field_button2" data-position="top" data-delay="50" data-tooltip="Añadir educacion superior"><i class="material-icons">add</i></a>
            </div> 
            </div>
            <div class="row">
              <div class="input-field col s6">
                <input class="validate" type="text" id="progracademico" name="progracademico[]">
                <label for="progracademico">Nombre Programa Academico</label>
              </div>
              <div class="input-field col s3">
                <input type="date" id="fechaterminacion" name="fechaterminacion[]">
                <label class="active" for="fechaterminacion">Fecha Terminación</label>
              </div>
              <div class="input-field col s3">
                <input type="text" class="validate" pattern="[a-zA-Z0-9]{3,}" id="numtarjprof" name="numtarjprof[]">
                <label for="numtarjprof"># Tarjeta Profesional</label>
              </div>
            </div>
        </div>
        </div>
      </div>

帮助!......(我会在这里)

0 个答案:

没有答案