我正在为我自己的低级程序执行者创建自动完成功能.我需要在VScode和其他IDE中输入的字母表附近获得自动完成值.但我在调整它的大小方面有问题.我需要在文本区 for each 单词输入单词后得到这个框.
这是我的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
.ui-autocomplete {
width:140px !important;
top: 50px !important;
}
</style>
<script>
$(function () {
console.log("hi");
var availableTags = ["SET","ADD","MUL","SUB","DIV","MOD","LOOP","ENDLOOP","IF","ENDIF","ELSE","ENDELSE","END"];
function split( val ) {
return val.split( / \s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#tags" ).bind( "keydown", function( event ) {
//can also use this to track when user presses SPACE
if(event.which===32)
$('#characterSpan').html($(this).val());
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault();
}
}),
$( "#tags" ).autocomplete({
minLength: 1,
source: function( request, response ) {
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
terms.pop();
terms.push( ui.item.value );
terms.push( " " );
this.value = terms.join(" ");
//when item selected, add current value to span
//$('#characterSpan').html($(this).val());
return false;
},
open: function( event, ui ) {
$('.ui-autocomplete.ui-menu');
},
open: function() {
var position = window.getSelection().getRangeAt(0).startOffset;
var cursorPos= $("#tags").prop('selectionStart');
$("ul.ui-menu").width();
}
});
});
</script>
<title>Document</title>
</head>
<body>
<div id="menu-container" style="position:absolute; width: 500px;">
<label for="tags">Tag programming languages: </label>
<textarea id="tags" rows="20" cols="70"></textarea>
<span id="characterSpan" style="visibility: hidden;"></span>
</div>
</body>
</html>