Javascript jQuery Autocomplete-防止提交任何不是Autocomplete数组中的值的内容？

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

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

我对表单进行了设置，这样当用户单击自动完成建议（来自我的JS“source”数组的“label”）时，单击的相应源的“value”值就会输入到隐藏的“propertylink”字段中，而源的“label”值会同时输入到可见的“tags”输入字段中

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

如果用户在未单击自动完成选项的情况下单击提交按钮，则不会向#propertylink字段分配get变量值。我怎样才能使它只有我的JS变量“source”数组值触发提交按钮出现？现在，只要输入字段不是空的，它就会显示出来

我对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>

$（文档）.ready（函数（）{
变量源=[
{ 
值：“910091432”，
标签：“123费尔法克斯Ln”
},
{ 
值：“910091433”，
标签：“567郡Ln”
}
];
$（“输入标记”）。自动完成({
来源：功能（请求、响应）{
var results=$.ui.autocomplete.filter（source、request.term）；
response（results.slice（0,35））；/*这只是为了将结果量限制在35*/
},
焦点：功能（事件、用户界面）{
$（“#标签”）.val（ui.item.label）；
返回false；
},
选择：函数（事件，ui）{
$（“输入#属性链接”）.val（ui.item.value），
$（“#标签”）.val（ui.item.label）；
返回false；
}
});
});
$（文档）.ready（函数（）{
$（'.sendButton'）.attr（'disabled'，true）；
$（“#标记”）.keyup（函数（）{
if（$（this）.val（）.length！=0）
$（'.sendButton'）.attr（'disabled'，false）.fadeIn（500）；
其他的
$（'.sendButton'）.attr（'disabled'，true.）.fadeOut（500）；
})
});

---

编辑：有关最终修复，请参见下面的编辑

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

目前，您的最后一个函数如下所示：

$(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);
    })

$(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（$（“#标记”）.val（）.length！=0） { 如果（$（“#标记”）.val（）=“123费尔法克斯项次”） { $（'.sendButton'）.attr（'disabled'，false）.fadeIn（500）；
} 其他的 { $（'.sendButton'）.attr（'disabled'，true.）.fadeOut（500）； } } 其他的 { $（'.sendButton'）.attr（'disabled'，true.）.fadeOut（500）； } }

您将看到我删除了自动完成下面的第二个“$（document）.ready…”函数。我将“keyup”函数中的代码放入一个新函数“goButtonVisibility”中。我认为代码与以前完全相同

你也会注意到这三条线：

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

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

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

问题此代码已修复：

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

---

如果还有什么，虫子或者其他你想让我解释的东西，让我知道

感谢您抽出时间撰写回复！但是，使用第一个示例（不带数组的测试示例），似乎只有在手动将特定文本（即“123 Fairfax Ln”）输入字段时，按钮才会出现。从自动完成选项列表中选择“123 Fairfax Ln”不会触发按钮出现。你有什么想法吗？你是点击选择它还是使用键盘？我使用了键盘，这可能被视为一个“onkeyup”事件，这就是它工作的原因。给我几个小时，我有事要做，但我会看一看，然后尽快给你回复。我单击了选择按钮