select match event JQuery Keyup

Question

select match event JQuery Keyup

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I'm doing a search with ajax in the event jquery Keyup so that it shows me matches according to the letter with which the user starts typing and you can select an option from the options that returns the ajax , but I do not know how to do it so that the option can be selected and added to the textbox where the user is typing, to then be able to search for that option with a button on a BD

my code is:

    $(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>

javascript jquery

asked by Ivxn 15.11.2016 в 16:25

source

2 answers

How can I compare a data binary with GridFs in MongoDb? Ignore field when converting to JSON in a REST service in JAVA EE

score 0 · Answer 1

I think you'd better use plugins and / or third-party widgets that are well documented, tested and with a community that supports them.

There are many widgets for jQuery to create autocompletes .

For example:

link (recommended)

link

I hope someone serves you.

score 0 · Answer 2

Sorry for not answering your question. I have used (as they recommend in the other answer) the jquery-ui plugin in my case what I did was load an array with the product names ($ results2) and with jquery I only did:

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
        });

and my input with the id search. I hope it serves you something

link