2

Estoy haciendo un buscador con ajax en el evento jquery Keyup para que me muestre coincidencias según la letra con la que el usuario empieza a teclear y se pueda seleccionar una opción de las opciones que devuelve el ajax, pero no se como hacer para que se pueda seleccionar la opción y agregarla al textbox donde esta tecleando el usuario, para después poder buscar esa opción con un botón en una BD

mi código es:

    $(document).ready(function () {
        $("#filtroBusqueda").change(function () {            
            var op = $(this).val();

            switch (op) {

                case "rs":
                    $("#rs").css({ 'display': 'block' });
                    $("#ln").css({ 'display': 'none' });
                    $("#nc").css({ 'display': 'none' });
                    break;
                case "ln":
                    $("#ln").css({ 'display': 'block' });
                    $("#rs").css({ 'display': 'none' });
                    $("#nc").css({ 'display': 'none' });
                    break;
                case "nc":
                    $("#nc").css({ 'display': 'block' });               
                    $("#rs").css({ 'display': 'none' });
                    $("#ln").css({ 'display': 'none' });
            }
        });

        $("#txtRazon").keyup(function () {
            var valor = $(this).val();
            //alert(valor);
            $.ajax({
                type: 'POST',
                url: "coincidencia",
                //contentType: false,
                data: { "valorBusqueda": valor },
                //processData: false,
                //cache: false,
                success: function (data, textStatus, jqXHR) {
                    $("#resultadosBusqueda").hide().html(data).fadeIn("fast");                    
                }
            });
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h5><span class="glyphicon glyphicon-th"></span>Búsqueda</h5>
  <form id="registrationForm" method="post" class="form-horizontal mitad" action="#">

    <div class="form-group">

      <div class="col-lg-12">
        <select name="filtroBusqueda" id="filtroBusqueda" class="form-control">
          <option value="" disabled selected>Selecciona Opción</option>
          <option value="rs">Nombre</option>
          <option value="ln">Línea</option>
          <option value="nc">Número cuenta</option>
        </select>

      </div>

    </div>

    <div id="rs" style="display:none">
      <div class="form-group">

        <label class="col-md-2 control-label">Nombre</label>

        <div class="col-md-10">
          <input type="text" id="txtRazon" class="form-control" />

        </div>

      </div>
    </div>

    <div id="ln" style="display:none">
      <div class="form-group">

        <label class="col-lg-3 control-label">Número telefonico</label>

        <div class="col-lg-12">
          <input type="text" id="txtTelefono" class="form-control" />

        </div>

      </div>
    </div>

    <div id="nc" style="display:none">
      <div class="form-group">

        <label class="col-lg-3 control-label">Número cuenta</label>

        <div class="col-lg-12">
          <input type="text" id="txtCuenta" class="form-control" />

        </div>

      </div>
    </div>
    <div id="resultadosBusqueda"></div>
  </form>
</div>

1 respuesta 1

0

perdon por no contestar tu pregunta. Yo he utilizado(como te recomiendan en la otra respuesta) el plugin de jquery-ui en mi caso lo que hice fue cargar un arreglo con los nombres de productos($results2) y con jquery solo hice:

function monkeyPatchAutocomplete() {
        $.ui.autocomplete.prototype._renderItem = function (ul, item) {
            item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<span style='font-weight:bold;color:Blue;'>$1</span>");
            return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a style='text-decoration: none;border: none;'>" + item.label + "</a>")
                    .appendTo(ul);
        };
    }



   <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    monkeyPatchAutocomplete();
    var languages = <?php echo json_encode($results2)?>;
        $("#search").autocomplete({
            source: languages
        });

y mi input con el id search. Espero te sirva de algo

https://stackoverflow.com/questions/2435964/jqueryui-how-can-i-custom-format-the-autocomplete-plug-in-results

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.