简体   繁体   English

如何使用Jquery自动完成设置“填充后焦点”文本框?

[英]How to Set Focus After Filled text box with Jquery AutoComplete?

I Think it is very easy, if I type on that text box or copy paste the below code: 我认为这很容易,如果我在该文本框中键入或复制,请粘贴以下代码:

<script>
    $(document).ready(function() {
       $("#textbox1").bind("input",function(){
           $("#textbox2").focus();
       });
    });
</script>

My Problem is, I have used Jquery Ui Plugin on the textbox. 我的问题是,我在文本框中使用了Jquery Ui插件。 So, It does not work on it. 因此,它不起作用。

The All I need is After Auto Complete finish, focus will run. 我所需要的是自动完成后,焦点将运行。 But right now, auto complete does not focus its textbox. 但是现在,自动完成功能不会集中在其文本框中。

can anyone help me to fix this? 谁能帮我解决这个问题?

this the code https://jsfiddle.net/o25n6017/ 这是代码https://jsfiddle.net/o25n6017/

But textbox 1 is autocomplate 但是文本框1是自动补全

thanks in advance. 提前致谢。

May be you want focus on textbox2 after focusout from textbox1 as per I understand. 根据我的理解,可能是您希望在从textbox1进行textbox2之后将注意力集中在textbox2

$( "#TEXT_BOX1" ).autocomplete({
    source: availableTags,
      select: function ()
      {
           $("#TEXT_BOX2").focus();  
      }
});

Demo 演示

Working code: 工作代码:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <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>
  <link rel="stylesheet" href="/resources/demos/style.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"
    ];

    $( "#TEXT_BOX1" ).autocomplete({
      // event ===  Autocomplete finished
      close: function(){
        $("#TEXT_BOX2").focus();
      },
      source: availableTags
    });
  });

  </script>
</head>
<body>

<div class="ui-widget">

  <label for="tags">TEXT_BOX1: </label>
  <input id="TEXT_BOX1">

  <br><br><br>

   <label for="tags">TEXT_BOX2: </label>
  <input id="TEXT_BOX2">
</div>


</body>
</html>

example on http://plnkr.co/edit/GgWFAckqbA1MaOeM1Dfy?p=preview http://plnkr.co/edit/GgWFAckqbA1MaOeM1Dfy?p=preview上的示例

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM