Question

我有这个代码，除了一件事以外，效果很好。我需要输入的名称包含代码无法识别的空格。我试过“”但它不起作用。

例如，当我在输入框中输入附加购买时，它工作得很好，直到我到达“空间”然后我的描述消失了？

任何帮助将不胜感激！

       var data = [


                {   // Reject Title
                    name: 'Additional Purchase', 
                    // Reject Reason(s) w/Links 
                    description:    
                    '<div><a href="PDFRejectData/A005.pdf" target="PDF" class="reasonLink" >FUND ONLY ALLOWS NATURAL PERSONS</a> </div><div><a href="PDFRejectData/A007.pdf" target="PDF" class="reasonLink">MASTER ACOUNT STATUS IS CLOSED</a> </div>'                



                },
                {
                    name: 'Address Change',     // Reject Title
                    description:        // Reject Reasons with Links
                    'The Other Writer'
                },
                {
                    name: 'Asset Transfer',     // Reject Title
                    description: 'The CodeIgniter Writer'
                },
                {
                    name: 'Banking and Options', // Reject Title
                    description: 'Made Up Person #1'
                },
                {
                    name: 'Beneficiary',
                    description: 'Another Made Up Person'
                },
                {
                    name: 'Close Account',
                    description: 'That Guy'
                },
                {
                    name: 'CWR',
                    description: 'That Guy'
                },
                {
                    name: 'Date of Birth',
                    description: 'That Guy'
                },
                {
                    name: 'DividendCapital Gains Maintenance',
                    description: 'That Guy'
                },
                {
                    name: 'Domestic Bank on File',
                    description: 'That Guy'
                },
                {
                    name: 'Duplicate Statements',
                    description: 'That Guy'
                                    },
                {
                    name: 'Full Transfer Residual Followup',        // Reject Title
                    description:        // Reject Reasons with Links
                    'The Other Writer'
                },
                {
                    name: 'Legal Document',     // Reject Title
                    description: 'The CodeIgniter Writer'
                },
                {
                    name: 'Maintain Brokerage Account Link', // Reject Title
                    description: 'Made Up Person #1'
                },
                {
                    name: 'Maintain Control Person Client Information',
                    description: 'Another Made Up Person'
                },
                {
                    name: 'Maintain Mutual Fund Exch/Red Options',
                    description: 'That Guy'
                },
                {
                    name: 'Maintain SBS PLan',
                    description: 'That Guy'
                },
                {
                    name: 'Merge/Expand Rule Failure in Batch 1',
                    description: 'That Guy'
                },
                {
                    name: 'Micro Deposit Reject',
                    description: 'That Guy'
                },
                {
                    name: 'Money Movement',
                    description: 'That Guy'
                },
                {
                    name: 'Mutual Fund Freezes',
                    description: 'That Guy'

                }
            ];


            // Suggest section holder
            var $suggestedHL = $('.suggest-holder');
            // Suggestions UL
            var $suggestedUL = $('ul', $suggestedHL);
            // Suggestions LI
            var $suggestedLI = $('li', $suggestedHL);
            // Selected Items UL
            var $selectedUL = $('#selected-suggestions');
            // Keyboard Nav Index
            var index = -1;

            // Add a suggestion to the selected holder
            function addSuggestion(el){
                $selectedUL.append($('<li>' + el.find('.suggest-description').html() + '</li>'));
            }

            $('input', $suggestedHL).on({
                keyup: function(e){
                    var m = false;
                    if(e.which == 38){
                        // Down arrow - Check that we've not tried to select before the first item
                        if(--index < 0){
                            index = 0;
                        }

                        // Set a variable to show that we've done some keyboard navigation
                        m = true;
                    }else if(e.which == 40){
                        // Up arrow - Check that index is not beyond the last item
                        if(++index > $suggestedLI.length - 1){
                            index = $suggestedLI.length-1;
                        }

                        // Set a variable to show that we've done some keyboard navigation
                        m = true;
                    }

                    // Check we've done keyboard navigation
                    if(m){
                        // Remove the active class
                        $('li.active', $suggestedHL).removeClass('active');
                        $suggestedLI.eq(index).addClass('active');
                    }else if(e.which == 27){
                        index = -1;
                        // Esc key
                        $suggestedUL.hide();
                    }else if(e.which == 13){
                        // Enter key
                        if(index > -1){
                            addSuggestion($('li.active', $suggestedHL));
                            index = -1;
                            $('li.active', $suggestedHL).removeClass('active');
                        }
                    }else{
                        index = -1;
                        // Clear the ul
                        $suggestedUL.empty();

                        // Cache the search term
                        $search = $(this).val();

                        // Search regular expression
                        $search = new RegExp($search.replace(/[^0-9a-z_]/i), 'i');

                        // Loop through the array
                        for(var i in data){
                            if(data[i].name.match($search)){
                                $suggestedUL.append($("<li><span class='suggest-name'>" + data[i].name + "</span><span class='suggest-description'>" + data[i].description + "</span></li>"));
                            }
                        }

                        // Show the ul
                        $suggestedUL.show();
                    }
                    if($(this).val() == ''){
                        $suggestedUL.hide();
                    }
                },
                keydown: function(e){
                    if(e.which == 38 || e.which == 40 || e.which == 13){
                        e.preventDefault();
                    }
                },
                focus: function(e){
                    if($(this).val() != ''){
                        $suggestedUL.show();
                    }
                }
            });

            $suggestedHL.on('click', 'li', function(e){
                addSuggestion($(this));
            });

            $('body').on('click', function(e) {
                if (!$(e.target).closest('.suggest-holder li, .suggest-holder input').length) {
                    $suggestedUL.hide();
                };
            });
        </script>

Answer 1

如果在正则表达式中添加空格字符（不带引号），则可以解决此问题。所以转这一行：

  $search = new RegExp($search.replace(/[^0-9a-z_]/i), 'i');

进入这个：

  $search = new RegExp($search.replace(/[^0-9a-z_ ]/i), 'i');

我已经进行了快速测试：

＆＃13;

var data = [


  { // Reject Title
    name: 'Additional Purchase',
    // Reject Reason(s) w/Links 
    description: '<div><a href="PDFRejectData/A005.pdf" target="PDF" class="reasonLink" >FUND ONLY ALLOWS NATURAL PERSONS</a> </div><div><a href="PDFRejectData/A007.pdf" target="PDF" class="reasonLink">MASTER ACOUNT STATUS IS CLOSED</a> </div>'



  },
  {
    name: 'Address Change', // Reject Title
    description: // Reject Reasons with Links
      'The Other Writer'
  },
  {
    name: 'Asset Transfer', // Reject Title
    description: 'The CodeIgniter Writer'
  },
  {
    name: 'Banking and Options', // Reject Title
    description: 'Made Up Person #1'
  },
  {
    name: 'Beneficiary',
    description: 'Another Made Up Person'
  },
  {
    name: 'Close Account',
    description: 'That Guy'
  },
  {
    name: 'CWR',
    description: 'That Guy'
  },
  {
    name: 'Date of Birth',
    description: 'That Guy'
  },
  {
    name: 'DividendCapital Gains Maintenance',
    description: 'That Guy'
  },
  {
    name: 'Domestic Bank on File',
    description: 'That Guy'
  },
  {
    name: 'Duplicate Statements',
    description: 'That Guy'
  },
  {
    name: 'Full Transfer Residual Followup', // Reject Title
    description: // Reject Reasons with Links
      'The Other Writer'
  },
  {
    name: 'Legal Document', // Reject Title
    description: 'The CodeIgniter Writer'
  },
  {
    name: 'Maintain Brokerage Account Link', // Reject Title
    description: 'Made Up Person #1'
  },
  {
    name: 'Maintain Control Person Client Information',
    description: 'Another Made Up Person'
  },
  {
    name: 'Maintain Mutual Fund Exch/Red Options',
    description: 'That Guy'
  },
  {
    name: 'Maintain SBS PLan',
    description: 'That Guy'
  },
  {
    name: 'Merge/Expand Rule Failure in Batch 1',
    description: 'That Guy'
  },
  {
    name: 'Micro Deposit Reject',
    description: 'That Guy'
  },
  {
    name: 'Money Movement',
    description: 'That Guy'
  },
  {
    name: 'Mutual Fund Freezes',
    description: 'That Guy'

  }
];


// Suggest section holder
var $suggestedHL = $('.suggest-holder');
// Suggestions UL
var $suggestedUL = $('ul', $suggestedHL);
// Suggestions LI
var $suggestedLI = $('li', $suggestedHL);
// Selected Items UL
var $selectedUL = $('#selected-suggestions');
// Keyboard Nav Index
var index = -1;

// Add a suggestion to the selected holder
function addSuggestion(el) {
  $selectedUL.append($('<li>' + el.find('.suggest-description').html() + '</li>'));
}

$('input', $suggestedHL).on({
  keyup: function(e) {
    var m = false;
    if (e.which == 38) {
      // Down arrow - Check that we've not tried to select before the first item
      if (--index < 0) {
        index = 0;
      }

      // Set a variable to show that we've done some keyboard navigation
      m = true;
    } else if (e.which == 40) {
      // Up arrow - Check that index is not beyond the last item
      if (++index > $suggestedLI.length - 1) {
        index = $suggestedLI.length - 1;
      }

      // Set a variable to show that we've done some keyboard navigation
      m = true;
    }

    // Check we've done keyboard navigation
    if (m) {
      // Remove the active class
      $('li.active', $suggestedHL).removeClass('active');
      $suggestedLI.eq(index).addClass('active');
    } else if (e.which == 27) {
      index = -1;
      // Esc key
      $suggestedUL.hide();
    } else if (e.which == 13) {
      // Enter key
      if (index > -1) {
        addSuggestion($('li.active', $suggestedHL));
        index = -1;
        $('li.active', $suggestedHL).removeClass('active');
      }
    } else {
      index = -1;
      // Clear the ul
      $suggestedUL.empty();

      // Cache the search term
      $search = $(this).val();

      // Search regular expression
      $search = new RegExp($search.replace(/[^0-9a-z_\s]/i), 'i');

      // Loop through the array
      for (var i in data) {
        if (data[i].name.match($search)) {
          $suggestedUL.append($("<li><span class='suggest-name'>" + data[i].name + "</span><span class='suggest-description'>" + data[i].description + "</span></li>"));
        }
      }

      // Show the ul
      $suggestedUL.show();
    }
    if ($(this).val() == '') {
      $suggestedUL.hide();
    }
  },
  keydown: function(e) {
    if (e.which == 38 || e.which == 40 || e.which == 13) {
      e.preventDefault();
    }
  },
  focus: function(e) {
    if ($(this).val() != '') {
      $suggestedUL.show();
    }
  }
});

$suggestedHL.on('click', 'li', function(e) {
  addSuggestion($(this));
});

$('body').on('click', function(e) {
  if (!$(e.target).closest('.suggest-holder li, .suggest-holder input').length) {
    $suggestedUL.hide();
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="suggest-holder">
  <input type="text">
  <ul></ul>
</div>
(Try typing something like <code>additional purchase</code> or <code>date of birth</code>)

＆＃13;

如何使输入名称包含带有空格的全名作为字符串？

1 个答案: