javascript - jQuery Autocomplete - 防止提交任何不是自动完成数组中的值的内容？

Question

我正在尝试使用 jQuery 自动完成搜索表单在网站上创建“跳转到页面”类型的搜索。

在此表单上，我有两个文本输入字段。一个是用户看到的 (#tags)，另一个是隐藏的(#propertylink - 我在 JSFiddle 中使其可见，以便更容易理解我的代码中发生的情况。)该值用于发送 get 变量到下一页，然后用于生成下一页上的内容。

我已经设置了表单，以便当用户单击自动完成建议(来 self 的 JS“源”数组的“标签”)时，所单击的相应源“值”的值将输入到隐藏的 #propertylink 字段，源的“label”值同时输入到可见的 #tags 输入字段中。

当隐藏的 #propertylink 字段变得可见时，我将提交按钮设置为淡入，切换为启用，然后单击提交按钮将用户带到使用 #propertylink GET 变量的结果页面。在这种情况下一切都很好，但是问题是，如果用户不选择自动完成建议之一。

如果用户单击提交按钮而不单击自动完成选项，则不会将获取变量值分配给 #propertylink 字段。我怎样才能做到只有我的 JS 变量“源”数组值才会触发提交按钮出现？现在，只要输入字段不为空，它就会显示。

我是 JS 和 Jquery 的新手，我只需要一点帮助即可使最后一部分正常工作。

<div class="ui-widget">
<form method="get" action="listing-detail.php">
  <input id="tags" type="text"/>
  <input id="propertylink" type="hidden" name="list_id"/>
  <input class="sendButton" type="submit" value="Go">
  </form>
</div>


<script>
$(document).ready(function() {
var source = [
            { 
              value: "910091432",
              label: "123 Fairfax Ln"
            },
            { 
              value: "910091433",
              label: "567 The Shire Ln"
            }
             ];

    $("input#tags").autocomplete({
        source: function(request, response) {
        var results = $.ui.autocomplete.filter(source, request.term);

        response(results.slice(0, 35)); /* this is just to limit the amount of results to 35 */
    },
        focus: function( event, ui ) {
        $( "#tags" ).val( ui.item.label );
        return false;
      },
        select: function( event, ui ) { 
        $( "input#propertylink" ).val( ui.item.value ),
        $( "#tags" ).val( ui.item.label );
        return false;
        }
    });
});

$(document).ready(function(){
    $('.sendButton').attr('disabled',true);
    $('#tags').keyup(function(){
        if($(this).val().length !=0)
            $('.sendButton').attr('disabled', false).fadeIn(500);            
        else
            $('.sendButton').attr('disabled',true).fadeOut(500);
    })
});
</script>

https://jsfiddle.net/3d13daxj/1/

Answer 1

编辑:请参阅下面的编辑以获取最终修复。

我在您提供的 jsfiddle 链接中对此进行了测试。我以前从未使用过 jsfiddle，但这似乎工作得很好。

你的最后一个函数现在看起来像这样:

$(document).ready(function(){
    $('.sendButton').attr('disabled',true);
    $('#tags').keyup(function(){
      if($(this).val().length !=0)
        $('.sendButton').attr('disabled', false).fadeIn(500);            
      else
        $('.sendButton').attr('disabled',true).fadeOut(500);
   })
});

我将以下内容添加到“onkeyup”函数内的 if 语句中:

$('#tags').keyup(function(){
  if($(this).val().length !=0)
    if($("#tags").val()=="123 Fairfax Ln")
      $('.sendButton').attr('disabled', false).fadeIn(500);                                                       
    else
      $('.sendButton').attr('disabled',true).fadeOut(500);

    else
      $('.sendButton').attr('disabled',true).fadeOut(500);
    })

这只是为了测试它，而且它有效。如果输入字段与“123 Fairfax Ln”不匹配，“Go”按钮就会消失，或者根本不出现。

您可以通过创建一个填充所有可接受值的数组来替换我的测试，然后将我添加的 if 语句放入 for 循环内。

它看起来像这样:

var arrayOfAcceptableValues = ["Fill with all acceptable values"];

$('#tags').keyup(function(){
  if($(this).val().length !=0)
    for(i=0; i< arrayOfAcceptableValues.length;i++)
    // This will loop through all the values in your array.
      var testCase = arrayOfAcceptableValues[i];

      if($("#tags").val()== testCase)
      // This is the test to see if the value entered by the user is actually one of your predetermined acceptable values.
        $('.sendButton').attr('disabled', false).fadeIn(500);                                                         
      else
        $('.sendButton').attr('disabled',true).fadeOut(500);

    else
      $('.sendButton').attr('disabled',true).fadeOut(500);
    })

最后的建议。我建议您配置第二个输入，以便当第一个输入为空时，它也为空。当我清除第一个输入时，自动填充的生成值不会消失。作为安全预防措施，当第一个输入为空时，我会自动清除该输入。

希望有帮助!

编辑:修复了点击问题以及一两个其他问题。

所以我在几个地方更改了您的代码，但我将解释我做了什么以及这些更改修复了哪些内容。

新的java脚本代码如下所示:

$(document).ready(function() {
  var source = [
            { 
              value: "910091432",
              label: "123 Fairfax Ln"
            },
            { 
              value: "910091433",
              label: "567 The Shire Ln"
            }
             ];

    // I moved this line here so that the button functions properly.
    $('.sendButton').attr('disabled',true);

    $("input#tags").autocomplete({
        source: function(request, response) {
        var results = $.ui.autocomplete.filter(source, request.term);

        response(results.slice(0, 35));
    },
        focus: function( event, ui ) {
        $( "#tags" ).val( ui.item.label );
        return false;
      },
        select:function(event, ui){
          $( "input#propertylink" ).val( ui.item.value ),
          $( "#tags" ).val( ui.item.label );
          return false;
        }

    });

  // -Event Listeners:
  $("#tags").on( "change", function(){}).change();

  $("#tags").on("autocompleteselect", goButtonVisibility);
  $("#tags").keyup("autocomplete",goButtonVisibility);


});

函数 goButtonVisibility(e,ui) { if($("#tags").val().length!=0) { if($("#tags").val()=="123 费尔法克斯 Ln") { $('.sendButton').attr('已禁用', false).fadeIn(500);
} 别的 { $('.sendButton').attr('禁用',true).fadeOut(500); } } 别的 { $('.sendButton').attr('禁用',true).fadeOut(500); } }

您会看到我删除了自动完成下方的第二个“$(document).ready...”函数。我将“keyup”函数内的代码放入新函数“goButtonVisibility”中。我认为代码与之前的完全一样。

您还会注意到这三行:

$("#tags").on( "change", function(){}).change();

$("#tags").on("autocompleteselect", goButtonVisibility);
$("#tags").keyup("autocomplete",goButtonVisibility);

第一个在 #tags 字段上放置一个操作监听器，并监听任何更改。当用户单击链接而不是使用键盘时，将触发中间的代码行。这样就解决了这个问题。最后一行几乎是您的“keyup”功能。

此代码修复的问题:

• 您原来的问题。
• 点击问题。
• 修复了一个错误:用户可以选择一个选项，从而启用“开始”按钮，但用户随后可以返回编辑选择，而无需再次禁用“开始”按钮。
• 它还修复了用户可以键入“a”并将鼠标悬停在下拉项上的错误。该字段将填充悬停在其上的项目，并且“Go”按钮将启用。但是，用户可以将光标从下拉菜单中移开，该字段将返回到仅显示其搜索词(在示例中为“a”)，但“Go”按钮将保持启用状态。

如果还有其他任何问题、错误或您希望我解释的内容，请告诉我!