Question

我有两个自动填充文本框。我已经使用jquery-ui小部件来实现autocomlete文本框。我需要通过单击按钮来交换它们的值。

自动填充文本框工作正常。但是点击它无法进行交换的按钮。

这是代码。

＆＃13;

<!DOCTYPE html>
<html>


<head>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/sunny/jquery-ui.css" rel="stylesheet" type="text/css" />

  <script>
    $(function() {
      var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
      ];

      $("#from").autocomplete({
        source: availableTags
      });

      $("#to").autocomplete({
        source: availableTags
      });


      $("#change").on('click', function() {
        var pickup = $('#from').val();
        $('#from').val($('#to').val());
        $('#to').val(pickup);


      });

    });
  </script>

</head>

<body>


  <div class="ui-widget">
    <label for="from">From:</label>
    <input id="from" type="text">

    <input id="change" type="button" value="Swap">

    <label for="to">To:</label>
    <input id="to" type="text">
  </div>

</body>

</html>

＆＃13;

简单的文本框交换没有自动完成功能正常。

＆＃13;

<!DOCTYPE html>
    <html>
    <head>
    <script src="jquery.js"></script>
    <script>
    
    $(function (){
    
        $("#change").on('click',function(){
            var pickup = $('#from').val();
            $('#from').val($('#to').val());
            $('#to').val(pickup);
    });
    
    });
    
    </script>
    
    </head>
    <body>
    
    <input id="from" type="text"/>
    
    <input id="change" type="button" value="Swap">
    
    <input id="to" type="text"/>
    </body>
    </html>

＆＃13;

Answer 1

您的第一个代码段无效，因为您使用.on()方法使用旧版本的jquery。 jQuery on()中引入了1.7方法。

添加较新版本将解决问题：

＆＃13;

$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];

  $("#from").autocomplete({
    source: availableTags
  });

  $("#to").autocomplete({
    source: availableTags
  });

  $("#change").on('click', function() {
    var pickup = $('#from').val();
    $('#from').val($('#to').val());
    $('#to').val(pickup);

  });


});

＆＃13;

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/sunny/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>

<div class="ui-widget">
  <label for="from">From:</label>
  <input id="from" type="text">

  <input id="change" type="button" value="Swap">

  <label for="to">To:</label>
  <input id="to" type="text">
</div>

＆＃13;

您可以使用bind()方法在旧版本的jquery中附加事件处理程序。

附注：

代码段中的每种语言都有单独的部分。
您只需将<body>的内容放在HTML窗口中。
您的第二个代码段也无效，因为您尚未链接jQuery。

通过单击按钮交换两个自动文本框的值

1 个答案: