how to make an input of 3 characters search for matches in the database

Question

how to make an input of 3 characters search for matches in the database

Navigation

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

0

I already have the connection to the DB, in the div I call the database but it brings as 16000 record so I can not show them in a select, so it occurred to me that since the input after put 3 characters start looking for matches, any suggestions?

 <div class="form-group" ng-init="GetArticulos()">

     <input type="search"class="form-control" placeholder="Coloca el codigo de producto" ng-model="articulo in articulos"/>
     <select ng-model="articuloseleccionado" class="form-control"  data-content="Seleccione un articulo" placeholder="Seleccione un articulo">
         <option value="" disabled selected>Seleccione un Articulo</option>
         <option ng-repeat="articulo in articulos " value="">{{tamano.ListaProductos}}</option>
     </select>

 </div>

angularjs

asked by Alex 17.05.2018 в 16:04

source

2 answers

How can I order the appearance of snippets in sublimeText? A non-numeric value error php7

score 0 · Answer 1

Use ajax in the following way:

var inputBusqueda = document.getElementById("inputBusuqeda");
inputBusqueda.addEventListener("keyup", function(){
     if(inputBusqueda.value.length > 3){
          //Llamada ajax
     }else{
          //Limpias la tabla donde muestras resultados
     }
});

score 0 · Answer 2

Based on the example provided by the user "handtrix" in jsfiddle and with some small modifications to adapt it to your need you can use the following code as a solution to your problem:

$(document).ready(function () {
    
    $("#suggest").autocomplete({
    		minLength:3,
        delay: 100,
        source: function (request, response) {
            
            // Suggest URL
            var suggestURL = "http://suggestqueries.google.com/complete/search?client=chrome&q=%QUERY";
            suggestURL = suggestURL.replace('%QUERY', request.term);
            
            // JSONP Request
            $.ajax({
                method: 'GET',
                dataType: 'jsonp',
                jsonpCallback: 'jsonCallback',
                url: suggestURL
            })
            .success(function(data){
                response(data[1]);
            });
        }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
  integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
  crossorigin="anonymous"></script>
<input type="text" placeholder="type something ..." id="suggest" />

The solution is to use the Jquery library to have the autocomplete module that offers your UI (jqueryui) which allows you to perform an autocomplete either from a "json" (recommended), a result of query to some database or simply "text" placed by you inside the source document (not recommended).

To get it from 3 characters you have the configurable parameter named minlenght as follows: minLength:3 within the autocomplete function as shown by the snippet provided above.

I hope it helps. Greetings.

Observation: In the case of the adaptation that I made the jquery autocomplete plugin is referenced in the jquery source code provided online but you can also download it to place it "locally" in your project. the official page: jqueryui

Source: example of handtrix user autocompletion