将推荐列表动态添加到输入字段

时间:2017-09-01 14:07:37

标签: javascript jquery

我想动态地将下拉推荐列表添加到输入字段。因此,如果有人点击输入字段,则应该有一个下拉列表,当有人选择任何选项时,应该更新输入字段值。

我正在尝试使用此代码,其中此editabletext是输入框的ID。



   $('#demo').on('click', '#editabletext', function (e)
            {

            var det = '<select id=\'dropdownlist\'><option value=\'1\'>1</option><option value=\'4\'>4</option><option value=\'5\'>5</option></select>';
                 $(e.target).append(det);
            });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="demo">
  <input id="editabletext" />
</div>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:0)

JQuery UI已经使用autocomplete执行此操作,它也是免费的。

尝试在下面的代码段中的文本框中输入 PHP Lisp

  $( 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"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

答案 1 :(得分:0)

这是一个关于你问题的简单解决方案,所以试试看:

&#13;
&#13;
$('#editabletext').click(function(e) {
  $("#NavDropdownListContainer").css('visibility', 'visible')
});

$('.ms-qSuggest-listItem').click(function() {
  $('#editabletext').val($(this).text())
  $("#NavDropdownListContainer").css('visibility', 'hidden')
})
&#13;
.ms-qSuggest-listItem {
  cursor: pointer;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="editabletext" type=text>


<div id="NavDropdownListContainer" style="display: block; visibility: hidden; position: absolute;">
  <div style="width: 249px;">
    <div class="ms-qSuggest-listItem">Everything</div>
    <div class="ms-qSuggest-listItem">People</div>
    <div class="ms-qSuggest-listItem">Conversations</div>
    <div class="ms-qSuggest-listItem">This Site</div>
  </div>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您可以使用解决方案https://jsfiddle.net/5wnofhjc/

&#13;
&#13;
$(document).on('click', 'input#editabletext', function (e){
  var det = `<ul id='dropdownlist'>
                <li value='1'>1</li>
                <li value='4'>4</li>
                <li value='5'>5</li>
            </ul>`;
  $(this).after(det);
  $('#dropdownlist').css('width', $(this).width());
});
&#13;
ul {
  list-style-type: none;
  box-shadow: 0px 0px 1px 0px #000;
  position: absolute;
  margin-top: 0px;
  padding: 0px;
}

li {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.2);
}

#demo {
  postion: relative;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demo">
  <input id="editabletext" type=text>
</div>
&#13;
&#13;
&#13;

backtick而不是单引号或双引号来获取整个元素。

希望这会有所帮助。