Question

我目前有一个Javascript自动填充的工作代码，它根据用户输入字段的内容将用户重定向到某个网页。

然而，我尝试使用一个功能，其中一个div被隐藏，一个div显示取决于他们在输入字段中键入的内容。

例如，如果他们将Spencer Kline键入输入框，我想要＆＃39; div1＆＃39;消失，＆＃39; div2＆＃39;出现。

我目前有这段代码：

<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>  
<script>
$(document).ready(function() {
  $("input#autocomplete").autocomplete({
    source: [{
        label: "Spencer Kline"
      }, {
        value: "www.example.com",
        label: "James Bond"
      }

    ],
    select: function(event, ui) {
      window.location.href = ui.item.value;
    }
  });
});
</script>      
<input type="text" id="autocomplete" style="width: 75%;">
</body>
</html>

Answer 1

你可以：

$(document).ready(function() {
  $("input#autocomplete").autocomplete({
    source: [{
        value: "www.foo.com",
        label: "Spencer Kline"
      }, {
        value: "www.example.com",
        label: "James Bond"
      }

    ],
    select: function(event, ui) {
      if (ui.item.label == "Spencer Kline") {
        $("#div1").show();
        $("#div2").hide(); // or whatever
      }
      window.location.href = ui.item.value;
    }
  });
});

但是这没有任何意义，因为我们使用window.location.href = ui.item.value;退出当前页面。

Answer 2

所以只是为了演示我已经为你添加了两个div。

正如您所提到的，您不希望将它们重定向到选择...所以您必须检查标签的值是什么，以及它们是否符合条件，使用JQuery来操作div的CSS，如下所示。

您可以为每个div添加自己的css规则或样式，以隐藏或显示它们。

<html>
<head>

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

</head>
<body>
  <div id = "div1">
    some div 1 content here...
  </div>

  <div id = "div2">
    some div 2 content here...
  </div>

  <input type="text" id="autocomplete" style="width: 75%;">
</body>

</html>

<script>
  $(document).ready(function() {

    $("input#autocomplete").autocomplete({

      source : [{
          value : "www.foo.com",
          label : "Spencer Kline"
        }, 
        {
          value : "www.example.com",
          label : "James Bond"
        }],
      select: function(event, ui) {

        if(ui.item.label === "Spencer Kline"){

          $("#div1").css("display", 'none');

        }

      }

    });

  });
</script>

Javascript自动填充 - 隐藏和显示Div

2 个答案: