javascript - 动态元素上的自动完成

Question

我每次都在这个问题上挣扎，今天又如此。我正在附加新的文本元素，并且我想将自动完成功能绑定(bind)到它。

此代码与之前的 onClick 一起使用

$('#highlights').before("<input type='text' id='check_name' name='name' placeholder='Name of OPM' required class='ui-autocomplete-input'>");

此自动完成功能位于网页末尾

<script type="text/javascript">
$("#check_name").autocomplete({
      source: "src/check_name.php",
      minLength: 1
    });
</script>

当我通过 URL 访问 PHP 文件时，它运行良好。

Answer 1

Because .before(): insert content, specified by the parameter, before each element in the set of matched elements.

您可以使用.prev() :

代码片段:

var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
  ];


  $('#highlights').before("<input type='text' id='check_name' name='name' placeholder='Name of OPM' required class='ui-autocomplete-input'>")
        .prev("#check_name")  // get the newly prev added ele
        .autocomplete({
            source: availableTags,
            minLength: 1
        });

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<div id="highlights"></div>