我想动态地将下拉推荐列表添加到输入字段。因此,如果有人点击输入字段,则应该有一个下拉列表,当有人选择任何选项时,应该更新输入字段值。
我正在尝试使用此代码,其中此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;
答案 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)
这是一个关于你问题的简单解决方案,所以试试看:
$('#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;
答案 2 :(得分:0)
您可以使用解决方案https://jsfiddle.net/5wnofhjc/
$(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;
你backtick
而不是单引号或双引号来获取整个元素。
希望这会有所帮助。