masozow masozow - 8 months ago 135
jQuery Question

JQuery reload/refresh/re-render select control

I have the following functions to do a search in the options of a select using an input text:

This function does the search whenever a key is pressed:

$( 'input#id_nit_del_cliente' ).keyup(function(e){
var nit = $('input#id_nit_del_cliente').val();
else {
$("#id_cliente_idcliente option:starts-with("+nit+")").attr('selected', true);
var seleccionado=$("#id_cliente_idcliente option:selected").text();

Later i want to do a comparation to know if what i wrote in the input text is the same than a portion of the text contained in one of the options in the select, i do the comparation when "enter key" or "tab key" are pressed:

$( 'input#id_nit_del_cliente' ).keydown(function(e){
var keyCode = e.keyCode || e.which;
if (e.keyCode==9||e.keyCode==13) {
var text=$("#id_cliente_idcliente option:selected").text().split(' ');
var nit = $('input#id_nit_del_cliente').val();
console.log("Nit del select:"+text[0]);
console.log("Nit del text:"+nit);
console.log("Solo nit:"+text[0]);
else {
alert('El cliente no existe');
$("#id_cliente_idcliente").selectmenu("refresh", true);

All this code works, but when it enters to the "else" of the second function, i manually clean the input text, and write something else, and it works, but at the third time it stops working, thats why i want to reload the select text, because when i press the refresh button of the browser, the select still showing the last selected value, but the search works again, but after two intents it fails again. I can't use any jquery plug-in because the "selects" and all the form controls are auto-generated by a DJango 1.8 ModelForm. I tried that selectmenu("refresh", true) method, but console log shows this:

TypeError: $(...).selectmenu is not a function

Here is the HTML:

<label>Cliente: </label><input id="id_nit_del_cliente" maxlength="13" name="nit_del_cliente" type="text" />
<select id="id_cliente_idcliente" name="cliente_idcliente">
<option value="" selected="selected">---------</option>
<option value="1">123456-k - Nombre: Esteban José López Ambrosio</option>
<option value="2">4543243-5 - Nombre: Nombre1 Apellido1</option>
<option value="3">843453-5 - Nombre: Persona Prueba Probando Fecha</option>
<label for="id_codigo_producto">Código: </label><input id="id_codigo_producto" maxlength="25" name="codigo_producto" type="text" />

I also use this code, i found it somewhere here in stackoverflow (this is not important, is working):

$.extend($.expr[":"], {
"starts-with": function(elem, i, data, set) {
var text = $.trim($(elem).text()),
term = data[3];
// first index is 0
return text.indexOf(term) === 0;
"ends-with": function(elem, i, data, set) {
var text = $.trim($(elem).text()),
term = data[3];
// last index is last possible
return text.lastIndexOf(term) === text.length - term.length;


Add this at the start of your javascript

var selectDefault = $("#id_cliente_idcliente").html();

And then in your else statement, remove this

$("#id_cliente_idcliente").selectmenu("refresh", true);

Then add this