jQuery重新加載/刷新/重新渲染選擇控件

Question

我具有以下功能，可以使用輸入文本在select的選項中進行搜索：

只要按下一個鍵，此函數就會進行搜索：

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

后來我想做一個比較，以了解我在輸入文本中寫的內容是否與select中的一個選項之一中包含的文本的一部分相同，我在“輸入鍵”或“ tab鍵”時進行比較按下：

  $( 'input#id_nit_del_cliente' ).keydown(function(e){
          var keyCode = e.keyCode || e.which;
          if (e.keyCode==9||e.keyCode==13) {
            e.preventDefault();
            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);
            if(text[0]===nit)
            {
              $('input#id_codigo_producto').focus();
              console.log("Solo nit:"+text[0]);
            }
            else {
              alert('El cliente no existe');
              $("#id_cliente_idcliente").selectmenu("refresh", true);
              $('input#id_nit_del_cliente').val('');
              $('input#id_nit_del_cliente').focus();
            }
          }
        });

所有這些代碼都有效，但是當它進入第二個功能的“ else”時，我手動清除了輸入文本，並編寫了其他內容，並且它可以工作，但是在第三次它停止工作時，這就是為什么我要重新加載的原因選擇文本，因為當我按下瀏覽器的刷新按鈕時，選擇仍然顯示最后選擇的值，但是搜索再次起作用，但是經過兩個意圖后，它再次失敗。 我無法使用任何jquery插件，因為“選擇”和所有表單控件都是由DJango 1.8 ModelForm自動生成的。 我嘗試了selectmenu（“ refresh”，true）方法，但是控制台日志顯示了這一點：

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

這是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>
</select>
<label for="id_codigo_producto">Código: </label><input id="id_codigo_producto" maxlength="25" name="codigo_producto" type="text" />

我也使用此代碼，我在stackoverflow的某處找到了它（這並不重要，正在運行）：

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

Answer 1

在您的javascript開頭添加此內容

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

然后在您的else語句中，刪除此

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

然后添加

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