Cómo usar la fuente dinámica en el cuadro combinado de jquery en una aplicación de Android usando el teléfono

Question

Estoy usando phonegap para desarrollar una aplicación de Android. Hay un cuadro de selección de autocompletar en la aplicación para la que utilicé el cuadro combinado jquery. El cuadro combinado está funcionando bien cuando estoy usando una fuente estática para el cuadro combinado. Pero tengo que usar una fuente dinámica para ello, ya que hay un gran conjunto de datos. Los datos se almacenan en la base de datos sqlite. Hay aproximadamente 12000 elementos en los datos y quiero filtrarlos para mostrar solo 10 elementos con alfabetos iniciales escritos en el cuadro combinado. Pero el cuadro combinado solo muestra los primeros 10 elementos y no está buscando en la base de datos cada palabra escrita. Está buscando en la base de datos solo cuando se presiona el retroceso.

Aquí es el código de cuadro combinado:

function loadCustomer(){ 

    //console.log('No rows affected!'); 
    //navigator.notification.alert(results.rows.item(0).name); 

      (function($) { 
     $.widget("ui.customer", { 
      _create: function() { 
       var input, 
        self = this, 
        select = this.element.hide(), 
        selected = select.children(":selected"), 
        value = selected.val() ? selected.text() : "", 
        wrapper = this.wrapper = $("<span>") 
         .addClass("ui-customer") 
         .insertAfter(select); 

       input = $("<input id='customer_input' autofocus>") 
        .appendTo(wrapper) 
        .val(value) 
        .addClass("ui-state-default ui-customer-input") 
        .autocomplete({ 
         delay: 0, 
         minLength: 0, 
         autofocus:true, 
         source: function(request, response) { 
          var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i"); 
          response(select.children("option").map(function() { 
           var text = $(this).text(); 
           if (this.value && (!request.term || matcher.test(text))) 
            return { 
             label: text.replace(
              new RegExp(
               "(?![^&;]+;)(?!<[^<>]*)(" + 
               $.ui.autocomplete.escapeRegex(request.term) + 
               ")(?![^<>]*>)(?![^&;]+;)", "gi" 
              ), "<strong>$1</strong>"), 
             value: text, 
             option: this 
            }; 
          })); 
         }, 
         select: function(event, ui) { 
          ui.item.option.selected = true; 
          self._trigger("selected", event, { 
           item: ui.item.option 
          }); 
          show_balance(); 
          updateGrid(); 
          $("#next_link").focus(); 
         }, 
         search: function(event, ui) {var db = window.openDatabase("Database", "1.0", "Cordova Demo", 2097152); 
          db.transaction(selectCustomer, errorCB);}, 
         change: function(event, ui) { 
          if (!ui.item) { 
           var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"), 
            valid = false; 
           select.children("option").each(function() { 
            if ($(this).text().match(matcher)) { 
             this.selected = valid = true; 
             return false; 
            } 
           }); 
           if (!valid) { 
            // remove invalid value, as it didn't match anything 
            $(this).val(""); 
            select.val(""); 
            input.data("autocomplete").term = ""; 
            return false; 
           } 
          } 
         } 
        }) 
        .focus(function() { 
     $(this).autocomplete("search", "");}) 
        .addClass("ui-widget ui-widget-content ui-corner-left"); 

       input.data("autocomplete")._renderItem = function(ul, item) { 
        return $("<li></li>") 
         .data("item.autocomplete", item) 
         .append("<a>" + item.label + "</a>") 
         .appendTo(ul); 
       }; 

       $("<a>") 
        .attr("tabIndex", -1) 
        .attr("title", "Show All Items") 
        .appendTo(wrapper) 
        .button({ 
         icons: { 
          primary: "ui-icon-triangle-1-s" 
         }, 
         text: false 
        }) 
        .removeClass("ui-corner-all") 
        .addClass("ui-corner-right ui-customer-toggle") 
        .click(function() { 
         // close if already visible 
         if (input.autocomplete("widget").is(":visible")) { 
          input.autocomplete("close"); 
          return; 
         } 

         // work around a bug (likely same cause as #5265) 
         $(this).blur(); 

         // pass empty string as value to search for, displaying all results 
         input.autocomplete("search", ""); 
         input.focus(); 
        }); 
      }, 

      destroy: function() { 
       this.wrapper.remove(); 
       this.element.show(); 
       $.Widget.prototype.destroy.call(this); 
      } 
     }); 
    })(jQuery); 

    $(function() { 
     $("#customer").customer(); 

    }); 
    return false; 

    } 

Este es el código para seleccionar los datos de la base de datos:

function selectCustomer(tx) { 
     requestterm=$("#customer_input").val(); 
     tx.executeSql('SELECT * FROM CUSTOMER WHERE name LIKE "'+requestterm+'%" LIMIT 10', [], selectCustomerSuccess, errorCB); 

    } 



function selectCustomerSuccess(tx, results) { 

    if (!results.rowsAffected) { 
    //console.log('No rows affected!'); 
    //navigator.notification.alert(results.rows.item(0).name); 
    var len = results.rows.length; 

    var options = '<option value=""></option>'; 
      for (var i=0; i<len; i++) { 
       options += '<option value="' + results.rows.item(i).custid + '">' + results.rows.item(i).name + '</option>'; 
      } 
      $("#customer").html(options); 
      $('#customer option:first').attr('selected', 'selected'); 

return false; 

    } 

    } 

por favor me ayude. Gracias por adelantado.

Answer 1

Tienes dos problemas:

1) de consultas que regresan sólo diez resultados

Su consulta sólo devuelve 10 porque tiene un LIMIT 10 allí. Así que (creo) que querrías selectCustomer() a tener este aspecto:

function selectCustomer(tx) { 
    requestterm=$("#customer_input").val(); 
    tx.executeSql('SELECT * FROM CUSTOMER WHERE name LIKE "'+requestterm+'%"', [], selectCustomerSuccess, errorCB); 
} 

2) Widget, solo podrá buscar cuando se pulsa la tecla de retroceso

No estoy seguro acerca de esto. El docs dice que search solo se ejecuta "antes de que se inicie una solicitud (fuente-opción), después de que se cumplan minLength y la demora". ¿Podría ser que tus consultas tarden un tiempo en ejecutarse por alguna razón y es solo una coincidencia que estás golpeando el espacio de retroceso cuando se ponen al día? Además, ¿ha intentado agregar una función parse al widget de autocompletar? parse le permite filtrar los resultados de búsqueda llamándose inmediatamente después de search, por lo que podría ayudarlo a depurar esto.