LCgjaj3j

1<style>
2.inlineautowrapper {
3  position: relative;
4  display:inline-block
5}
6.inlineautowrapper .inlineautoedit {
7  left: 0;
8  top: 0;
9  width:calc(100% - 6px);
10  padding: 6px 0px 6px 4px;
11  border-radius: 4px;
12}
13.inlineautowrapper .inlineautotop {
14  position: absolute;
15  background: none;
16  border: solid 1px #dadada;
17}
18.inlineautowrapper .inlineautobottom {
19  position: relative;
20  background: #fff;
21  border: solid 1px rgba(0,0,0,0);
22  color: #aaa;
23  margin: 0;
24}
25</style>
26
27<script>
28function inlineAutoComplete(selector, onChange){
29  var parent = $(selector);
30
31  var bottom = $('<input>')
32        .addClass('inlineautoedit inlineautobottom')
33        .attr('type', parent.attr('type') || 'input')
34        .attr('value', parent.attr('value') || '')
35        .on('focus', function(){
36          top.focus();
37        });
38
39  var top = $('<input>')
40        .addClass('inlineautoedit inlineautotop')
41        .attr('type', parent.attr('type') || 'input')
42        .attr('placeholder', parent.attr('placeholder') || '')
43        .attr('value', parent.attr('value') || '')
44        .on('input keyup keydown', function(){
45          parent.currentVal = $(this).val();
46          var suggestion = onChange ? onChange(parent.currentVal) || '' : '';
47          bottom.val((parent.currentVal && !isInputTextScrolling(this)) ? suggestion : '');
48        });
49
50  parent.addClass('inlineautowrapper')
51        .append(bottom)
52        .append(top);
53
54  return {
55    "GetSuggestion": function(){
56      return onChange(parent.currentVal) || parent.currentVal;
57    }
58  };
59}
60
61function isInputTextScrolling(ctrl){
62    if (isInputTextScrolling.e === undefined) {
63        isInputTextScrolling.e = document.createElement('span');
64        isInputTextScrolling.e.style.display = "none";
65        document.body.appendChild(isInputTextScrolling.e);
66    }
67    var ctrlStyle = window.getComputedStyle(ctrl, null);
68    isInputTextScrolling.e.style.fontSize = ctrlStyle.getPropertyValue('font-size');
69    isInputTextScrolling.e.style.fontFamily = ctrlStyle.getPropertyValue('font-family');
70    isInputTextScrolling.e.style.fontWeight = ctrlStyle.getPropertyValue('font-weight');
71    isInputTextScrolling.e.style.fontStyle = ctrlStyle.getPropertyValue('font-style');
72    isInputTextScrolling.e.innerText = ctrl.value;
73    return $(isInputTextScrolling.e).width() + 6 > ctrl.clientWidth;  // fudge factor of 6 because of padding and browser implementation differences
74    //isInputTextScrolling.e.offsetWidth should work, but doesn't (because it's not visible?)
75}
76</script>
77
78
79
80<!-- EXAMPLE USAGE -->
81
82
83
84<h1>Inline Autocomplete Tests</h1>
85
86<div id="someparent">
87... inside other containers
88<div id="myAutoComplete" placeholder="alphabet"></div>
89<div id="emailAutoComplete" type="email" placeholder="an email" style="width:100%"></div>
90With normal spacing
91</div>
92
93<br><br>
94
95<div id="shortAutoComplete" style="width:100px"></div>
96<button id="getSuggestion">Get Suggestion</button>
97<span id="suggestionResult"></span>
98
99
100<style>
101/* containment tests */
102#someparent{width:80%;background:#555;color:#bbb;font-family: tahoma,arial;}
103#anotherparent{width:200px;float:right;}
104</style>
105
106
107<script>
108$(function(){
109  inlineAutoComplete('#myAutoComplete', function(newValue){
110    var alphabet = 'abcdefghijklmnopqrstuvwxyz';
111    if (alphabet.startsWith(newValue))
112      return alphabet;
113  });
114  inlineAutoComplete('#emailAutoComplete', function(newValue){
115    if (!newValue.includes('@'))
116      return newValue + '@gmail.com';
117  });
118  var short = inlineAutoComplete('#shortAutoComplete', function(newValue){
119    if (!newValue.includes('@'))
120      return newValue + ' and company';
121  });
122  $('#getSuggestion').click(function(){
123    $('#suggestionResult').html(short.GetSuggestion());
124  });
125});
126</script>