Question

我有一个对象数组，在用户开始输入时为用户提供一系列建议。我想要发生的是，当用户选择他们想要的建议时，单击提交按钮，然后在搜索栏下的<div>中显示与该建议相关的价格。到目前为止，我一直没有成功。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Device Recycling</title>
  <link rel="stylesheet" href="/device_recycle.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
    var projects = [
      {
        Device: "iPhone",
        Price1: "$299",
        Price2: "$199"
      },
      {
        Device: "iPhone 2",
        Price1: "$199",
        Price2: "$99"
      }
    ];

    $( "#device" ).autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( "#device" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#device" ).val( ui.item.value );
        $( "#price1" ).val( ui.item.price1 );
        $( "#price2" ).html( ui.item.price2 );


        return false;
      }
    })



    $("#submit").click(function(){
     $( "#Price" ).append(  item.Price1 );
     });
  </head>
<body>

 <h1 id="font1">Quick Device Qoute</h1>
<div class="FormContainer">




  <input id="device"/>

  <input id ="submit" type="image" src="http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat-one-color/128/magnifying-glass-icon.png" alt="Submit button">
  <div id="ATT_Button" class="hidden"> 
     <input id ="ATT" type="image" src="http://classlawyer.lawyer/wp-content/uploads/2015/12/ATT-Logo-Image-Labeled-for-Reuse.png" alt="Submit button">
  </div>
  <div id="VZW_Button" class="hidden"> 
     <input id ="VZW" type="image" src="http://educationinactionri.org/Portals/0/Uploads/Images/Verizon_small.jpg" alt="Submit button">
  </div>
  <div id="Price"></div>

 </div>

</body>
</html>

最终我想要做的是当用户点击提交时，它会在Price1下方显示<div>，但是然后有另一个按钮，他们可以点击然后查看{{1 }}。不过，在这一点上，我会解决如何在点击提交按钮时找出Price2中的Price1。

Answer 1

您的javascript中存在相当多的错误，并且您尝试使用不存在的ID来绑定元素。

我在这里放了一份工作副本，大概是你所概述的内容：https://jsfiddle.net/nkocyafb/

<input id="device" />

<input id="submit" type="image" src="http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat-one-color/128/magnifying-glass-icon.png" alt="Submit button" width="50">

<div id="Price"></div>

<script>
    $(function() {
      var projects = {
        "iPhone": {
                            Price1: "$299",
                            Price2: "$199"
        },
        "iPhone 2": {
                            Price1: "$199",
                            Price2: "$99"
        }
      };

      var list = [
        "iPhone",
        "iPhone 2"
      ];

      $("#device").autocomplete({
        minLength: 0,
        source: list,
        focus: function(event, ui) {
          $("#device").val(ui.item.label);
          return false;
        },
        select: function(event, ui) {
          $("#device").val(ui.item.value);
          $("#price1").val(ui.item.price1);
          $("#price2").html(ui.item.price2);


          return false;
        }
      });

      $("#submit").click(function() {
        $("#Price").empty();

        var device = $("#device").val();
        $("#Price").append(projects[device].Price1);
      });
    });
</script>

有关其工作原理的更多详细信息，请参阅jQuery UI自动完成的文档：https://jqueryui.com/autocomplete/

获取jQuery Object数组中的项目以在div onclick中显示

1 个答案: