2016-12-21 93 views
1

我有一些現有的jquery自動完成代碼,它具有我需要的所有功能。自動完成功能會搜索組合框以查找以第一個字符開頭的匹配項。所有我需要做的就是添加多重選擇的功能,例如:Jquery自動完成與組合框上的多個選擇

jqueryui.com/autocomplete/#multiple

這裏是我的代碼:

<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<meta name="HandheldFriendly" content="True"> 
 
<meta name="PalmComputingPlatform" content="True"> 
 
<meta http-equiv=Content-Type content="text/html; charset=windows-1252"> 
 
<title>WebFOCUS Report</title> 
 
</head> 
 
<body> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<div> 
 
Please choose an option : 
 
<select size="3" id="decision2"> 
 
<option selected>1521</option> 
 
<option>3336</option> 
 
<option>5454</option> 
 
<option>7890</option> 
 
<option>2178</option> 
 
</select> 
 
</div> 
 

 
<style> 
 
    .custom-combobox { 
 
    position: relative; 
 
    display: inline-block; 
 
    } 
 
    .custom-combobox-toggle { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin-left: -1px; 
 
    padding: 0; 
 
    } 
 
    .custom-combobox-input { 
 
    margin: 0; 
 
    padding: 5px 10px; 
 
    } 
 
    </style> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <script> 
 
    $(function() { 
 
    $.widget("custom.combobox", { 
 
     _create: function() { 
 
     this.wrapper = $("<span>") 
 
      .addClass("custom-combobox") 
 
      .insertAfter(this.element); 
 
    
 
     this.element.hide(); 
 
     this._createAutocomplete(); 
 
     this._createShowAllButton(); 
 
     }, 
 
    
 
     _createAutocomplete: function() { 
 
     var selected = this.element.children(":selected"), 
 
      value = selected.val() ? selected.text() : ""; 
 
    
 
     this.input = $("<input>") 
 
      .appendTo(this.wrapper) 
 
      .val(value) 
 
      .attr("title", "") 
 
      .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") 
 
      .autocomplete({ 
 
      delay: 0, 
 
      minLength: 0, 
 
      source: $.proxy(this, "_source") 
 
      }) 
 
      .tooltip({ 
 
      classes: { 
 
       "ui-tooltip": "ui-state-highlight" 
 
      } 
 
      }); 
 
    
 
     this._on(this.input, { 
 
      autocompleteselect: function(event, ui) { 
 
      ui.item.option.selected = true; 
 
      this._trigger("select", event, { 
 
       item: ui.item.option 
 
      }); 
 
      }, 
 
    
 
      autocompletechange: "_removeIfInvalid" 
 
     }); 
 
     }, 
 
    
 
     _createShowAllButton: function() { 
 
     var input = this.input, 
 
      wasOpen = false; 
 
    
 
     $("<a>") 
 
      .attr("tabIndex", -1) 
 
      .attr("title", "Show All Items") 
 
      .tooltip() 
 
      .appendTo(this.wrapper) 
 
      .button({ 
 
      icons: { 
 
       primary: "ui-icon-triangle-1-s" 
 
      }, 
 
      text: false 
 
      }) 
 
      .removeClass("ui-corner-all") 
 
      .addClass("custom-combobox-toggle ui-corner-right") 
 
      .on("mousedown", function() { 
 
      wasOpen = input.autocomplete("widget").is(":visible"); 
 
      }) 
 
      .on("click", function() { 
 
      input.trigger("focus"); 
 
    
 
      // Close if already visible 
 
      if (wasOpen) { 
 
       return; 
 
      } 
 
    
 
      // Pass empty string as value to search for, displaying all results 
 
      input.autocomplete("search", ""); 
 
      }); 
 
     }, 
 
    
 
     _source: function(request, response) { 
 
     var matcher = new RegExp("\\b" + $.ui.autocomplete.escapeRegex(request.term), "i"); 
 
     response(this.element.children("option").map(function() { 
 
      var text = $(this).text(); 
 
      if (this.value && (!request.term || matcher.test(text))) 
 
      return { 
 
       label: text, 
 
       value: text, 
 
       option: this 
 
      }; 
 
     })); 
 
     }, 
 
    
 
     _removeIfInvalid: function(event, ui) { 
 
    
 
     // Selected an item, nothing to do 
 
     if (ui.item) { 
 
      return; 
 
     } 
 
    
 
     // Search for a match (case-insensitive) 
 
     var value = this.input.val(), 
 
      valueLowerCase = value.toLowerCase(), 
 
      valid = false; 
 
     this.element.children("option").each(function() { 
 
      if ($(this).text().toLowerCase() === valueLowerCase) { 
 
      this.selected = valid = true; 
 
      return false; 
 
      } 
 
     }); 
 
    
 
     // Found a match, nothing to do 
 
     if (valid) { 
 
      return; 
 
     } 
 
    
 
     // Remove invalid value 
 
     this.input 
 
      .val("") 
 
      .attr("title", value + " didn't match any item") 
 
      .tooltip("open"); 
 
     this.element.val(""); 
 
     this._delay(function() { 
 
      this.input.tooltip("close").attr("title", ""); 
 
     }, 2500); 
 
     this.input.autocomplete("instance").term = ""; 
 
     }, 
 
    
 
     _destroy: function() { 
 
     this.wrapper.remove(); 
 
     this.element.show(); 
 
     } 
 
    }); 
 
    
 
    $("#decision2").combobox(); 
 
    $("#decision2").on("click", function() { 
 
     $("#decision2").toggle(); 
 
    }); 
 
    }); 
 
    </script> 
 
</body> 
 
</html>

+0

歡迎堆棧溢出!您可以先參加[tour](http://stackoverflow.com/tour)並學習[如何提出一個好問題](http://stackoverflow.com/help/how-to-ask)並創建一個[最小,完整和可驗證](http://stackoverflow.com/help/mcve)示例。提供你的代碼,我們沒有足夠的時間在github上搜索它。我們會更容易幫助你。 –

+0

謝謝@AlexandreT – dmoses

回答

0

我修改了你的代碼。請檢查並讓我知道如果這是你想要的。

<html> 
 

 
<head> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
    <meta name="HandheldFriendly" content="True"> 
 
    <meta name="PalmComputingPlatform" content="True"> 
 
    <meta http-equiv=Content-Type content="text/html; charset=windows-1252"> 
 
    <title>WebFOCUS Report</title> 
 
</head> 
 

 
<body> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <div> 
 
     Please choose an option : 
 
     <select size="3" id="decision2"> 
 
     <option selected>1521</option> 
 
     <option>3336</option> 
 
     <option>5454</option> 
 
     <option>7890</option> 
 
     <option>2178</option> 
 
    </select> 
 
    </div> 
 

 
    <style> 
 
     .custom-combobox { 
 
      position: relative; 
 
      display: inline-block; 
 
     } 
 
     
 
     .custom-combobox-toggle { 
 
      position: absolute; 
 
      top: 0; 
 
      bottom: 0; 
 
      margin-left: -1px; 
 
      padding: 0; 
 
     } 
 
     
 
     .custom-combobox-input { 
 
      margin: 0; 
 
      padding: 5px 10px; 
 
     } 
 
    </style> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <script> 
 
     $(function() { 
 
      $.widget("custom.combobox", { 
 
       _create: function() { 
 
        this.wrapper = $("<span>") 
 
         .addClass("custom-combobox") 
 
         .insertAfter(this.element); 
 

 
        this.element.hide(); 
 
        this._createAutocomplete(); 
 
        this._createShowAllButton(); 
 
       }, 
 

 
       _createAutocomplete: function() { 
 
        var sourceArray = []; 
 
        var selectItems = this.element.context.children; 
 
        $.each(selectItems, function(i, item) { 
 
         sourceArray.push(item.value); 
 
        }); 
 

 
        var selected = this.element.children(":selected"), 
 
         value = selected.val() ? selected.text() : ""; 
 

 
        function split(val) { 
 
         return val.split(/,\s*/); 
 
        } 
 

 
        function extractLast(term) { 
 
         return split(term).pop(); 
 
        } 
 

 
        this.input = $("<input>") 
 
         .appendTo(this.wrapper) 
 
         .val(value) 
 
         .attr("title", "") 
 
         .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") 
 
         .autocomplete({ 
 
          delay: 0, 
 
          minLength: 0, 
 
          source: function(request, response) { 
 
           // delegate back to autocomplete, but extract the last term 
 
           var term = extractLast(request.term), 
 
            matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i"); 
 
           response($.grep(sourceArray, function(item) { 
 
            return matcher.test(item); 
 
           })); 
 
          }, 
 
          select: function(event, ui) { 
 
           var terms = split(this.value); 
 
           // remove the current input 
 
           terms.pop(); 
 
           // add the selected item 
 
           terms.push(ui.item.value); 
 
           // add placeholder to get the comma-and-space at the end 
 
           terms.push(""); 
 
           this.value = terms.join(", "); 
 
           return false; 
 
          } 
 
         }) 
 
         .tooltip({ 
 
          classes: { 
 
           "ui-tooltip": "ui-state-highlight" 
 
          } 
 
         }); 
 
       }, 
 

 
       _createShowAllButton: function() { 
 
        var input = this.input, 
 
         wasOpen = false; 
 

 
        $("<a>") 
 
         .attr("tabIndex", -1) 
 
         .attr("title", "Show All Items") 
 
         .tooltip() 
 
         .appendTo(this.wrapper) 
 
         .button({ 
 
          icons: { 
 
           primary: "ui-icon-triangle-1-s" 
 
          }, 
 
          text: false 
 
         }) 
 
         .removeClass("ui-corner-all") 
 
         .addClass("custom-combobox-toggle ui-corner-right") 
 
         .on("mousedown", function() { 
 
          wasOpen = input.autocomplete("widget").is(":visible"); 
 
         }) 
 
         .on("click", function() { 
 
          input.trigger("focus"); 
 

 
          // Close if already visible 
 
          if (wasOpen) { 
 
           return; 
 
          } 
 

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

 
       _removeIfInvalid: function(event, ui) { 
 

 
        // Selected an item, nothing to do 
 
        if (ui.item) { 
 
         return; 
 
        } 
 

 
        // Search for a match (case-insensitive) 
 
        var value = this.input.val(), 
 
         valueLowerCase = value.toLowerCase(), 
 
         valid = false; 
 
        this.element.children("option").each(function() { 
 
         if ($(this).text().toLowerCase() === valueLowerCase) { 
 
          this.selected = valid = true; 
 
          return false; 
 
         } 
 
        }); 
 

 
        // Found a match, nothing to do 
 
        if (valid) { 
 
         return; 
 
        } 
 

 
        // Remove invalid value 
 
        this.input 
 
         .val("") 
 
         .attr("title", value + " didn't match any item") 
 
         .tooltip("open"); 
 
        this.element.val(""); 
 
        this._delay(function() { 
 
         this.input.tooltip("close").attr("title", ""); 
 
        }, 2500); 
 
        this.input.autocomplete("instance").term = ""; 
 
       }, 
 

 
       _destroy: function() { 
 
        this.wrapper.remove(); 
 
        this.element.show(); 
 
       } 
 
      }); 
 

 
      $("#decision2").combobox(); 
 
      $("#decision2").on("click", function() { 
 
       $("#decision2").toggle(); 
 
      }); 
 
     }); 
 
    </script> 
 
</body> 
 

 
</html>

+0

謝謝Aminur。有什麼方法可以改變這種情況,以便建議只顯示從第一個輸入字符開始,而不是包含的內容?例如,如果我輸入'2',我只想看到'2178'而不是'2178'和'1521' – dmoses

+0

編輯我的答案,它現在正在作爲新的要求。請檢查。 –

+0

真棒完美! – dmoses