javascript - JavaScript 自动完成级联下拉/输入

Question

我有一个带有自动完成功能的依赖下拉代码。我可以通过输入的第一个字母来查看下拉列表中的值。如何使它显示输入输入的任何字母是否与数组中值的任何字母匹配并突出显示匹配的字母。请参阅Github 上的示例。

 var states = {
  'Color': ['red', 'black', 'yellow', 'green', ],
  'Numbers': ['one', 'two', 'three', 'four']
};

function initDialog() {
  clearDialog();
  var $locations = jQuery('#location');

  jQuery(document).on("change", "#country", function() {
        var country = $(this).val(),
          lcns = states[country] || [];

        var html = jQuery.map(lcns, function(lcn) {
          return '<div>' + lcn + '</div>'
        }).join('');
        $locations.html(html)
        if (jQuery('#country').val() == "color") {

          function match(str) {

            str = str.toLowerCase();
            clearDialog();
            for (var i = 0; i < states.color.length; i++) {
              if (states.color[i].toLowerCase().startsWith(str)) {
                jQuery('.dialog').append('<div>' + states.color[i] + '</div>');
              }
            }
          }
          var states = {
            'Color': ['red', 'black', 'yellow', 'green', ],
            'Numbers': ['one', 'two', 'three', 'four']
          };

          function initDialog() {
            clearDialog();
            var $locations = jQuery('#location');

            jQuery(document).on("change", "#country", function() {
                  var country = $(this).val(),
                    lcns = states[country] || [];

                  var html = jQuery.map(lcns, function(lcn) {
                    return '<div>' + lcn + '</div>'
                  }).join('');
                  $locations.html(html)
                  if (jQuery('#country').val() == "color") {

                    function match(str) {

                      str = str.toLowerCase();
                      clearDialog();
                      for (var i = 0; i < states.color.length; i++) {
                        if (states.color[i].toLowerCase().startsWith(str)) {
                          jQuery('.dialog').append('<div>' + states.color[i] + '</div>');
                        }
                      }
                    }

标签： javascriptphpjquerydrop-down-menu