javascript - 如果搜索查询不超过 x 个字符，则发出警报消息

Question

首先，感谢您花时间查看我的问题。真的。这是我的问题。我正在为我正在制作的网站制作一个 fancybox 搜索页面。在 fancybox 中获取搜索结果一切正常。

但是，如果访问者只是点击搜索，它就会返回网站上的所有项目。我想要的是让访问者必须在搜索之前至少输入 3 个字符。如果访问者没有输入 3 个或更多字符，fancybox 将发出警告，提示请输入至少 3 个或更多字符。

我查看了 stackoverflow 并发现了这段代码:

$( document ).ready(function() {
        input_value = $.trim($('#searchkey').val());
        if(input_value == ''){
           alert('Enter some value');
           return false;  //Does not submit the form 
        }else{
          //perform your code if it should not be empty. 
       }
    });

所以我将代码放在正确的位置，如下所示:

$( document ).ready(function() {
input_value = $.trim($('#str').val());
    if(input_value == ''){
       alert('Enter some value');
       return false;  //Does not submit the form 
    } else {
    $(function() {
      $('#search').on('submit', function(e) {
        e.preventDefault();
        jQuery.fancybox({
          width: 600,
          height: 600,
          openEffect: 'fade',
          closeEffect: 'fade',       
            href: 'search-post-results.php',
            type: "ajax",
              ajax: {
                type: "POST",
                data: {
                  value: $('#str').val()
                }
              }
            });
          });
        });
    }
});

我没有收到任何语法错误，但如果我重新加载页面，它会给我正确的警报。但这是在没有输入任何字符的情况下发生的。所以我改变了这一行:

if(input_value == ''){

至:

if(input_value == '2'){

我认为我应该设置一个值。但这没有任何作用。有人有类似的脚本/片段吗？或者知道为什么这不起作用？

这是 HTML(没有什么特别的):

<form id="search">
  <table>
    <tr>
      <td>
        <input type="text" name="s" id="str" placeholder="Search...">
      </td>
      <td>
        <button class="btn form-button btn-default">
          <i class="fa fa-search"></i>
        </button>
      </td>
    </tr>
  </table>
</form>

再次感谢您的宝贵时间。

Answer 1

使用length属性。

if( input_value.length < 3 ){
   // error message if characters are less than 3
} else {
   // continue the search
}