StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJquery-ui autocomplete dropdown below each word
text
Body
copied!<p>I'm using <a href="http://jqueryui.com/autocomplete/" rel="nofollow noreferrer">Autocomplete</a> from jquery-ui. In the multiple values, you can get dropdown list for each word after space, but the dropdown appears at the size of the input box. Is it possible to make the dropdown appear below the cursor of each which has a width equivalent to the dropdown words and not the entire length of the input box?</p> <p>EDIT: Example (Google-like search box):</p> <p>When you go to google and enter a long sentence as the sentence goes on, after each word, an autocomplete dropdown appears for each single word below the cursor position. So I require a similar dropdown which can be added on to the jQuery Autocomplete </p> <p><img src="https://i.stack.imgur.com/VgZH4.png" alt="enter image description here"></p> <p>My function is this big because it has features of multiple words and displaying array in order of alphabets. Here is the <code><script</code> code:</p> <pre><code> <script> $(function() { var availableTags = <?php echo json_encode($sometags); ?>; function split( val ) { return val.split( / \s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#query" ) // don't navigate away from the field on tab when selecting an item .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ minLength: 1, source: function( request, response ) { // delegate back to autocomplete, but extract the last term response( $.ui.autocomplete.filter( availableTags, extractLast( request.term ) ) ); var term = $.ui.autocomplete.escapeRegex(request.term) , startsWithMatcher = new RegExp("^" + term, "i") , startsWith = $.grep(availableTags, function(value) { return startsWithMatcher.test(value.label || value.value || value); }) , containsMatcher = new RegExp(term, "i") , contains = $.grep(availableTags, function (value) { return $.inArray(value, startsWith) < 0 && containsMatcher.test(value.label || value.value || value); }); response(startsWith.concat(contains)); }, focus: function() { // prevent value inserted on focus return false; }, select: function( event, ui ) { var terms = split( this.value ); // remove the current input terms.pop(); // add the selected item terms.push( ui.item.value ); // add placeholder to get the comma-and-space at the end terms.push( "" ); this.value = terms.join( " " ); return false; } }); }); </script> </code></pre> <p>EDIT: Just like the google-box, the dropdown should contain within the width of the input box meaning for example, the dropdown box for the last word in the input box should resize not to the right but to the left. The right edge of the dropdown box should be in line with the right edge of the inputbox and the total width of the dropdown (in case of words as big or bigger than input box) should not exceed the width of the input box.</p> <p><strong>UPDATE:</strong> Here is the final mod of the google-like autocomplete: <a href="http://jsfiddle.net/jc92619/T27PG/32/" rel="nofollow noreferrer">Fiddle</a> (Updated 16/2/2013)<br> Features:<br> 1) Fixed multiple words sort alphabetically against suggestions (<a href="https://stackoverflow.com/questions/14784794/jquery-ui-autocomplete-multiple-values-sort-results-alphabetically">jQuery-ui autocomplete multiple values sort results alphabetically</a>)<br> 2) Retrieve suggestions from 2 arrays with first suggestion opening at full width of input box like in google and rest of suggestions at the width of the longest suggestion<br> 3) Fixed bugs of dropdown opening before input of word after 'space' (multiple values).<br> 4) Prevent dropdown from being kept open at the end while adding words in between.<br> 5) 16/2/2013 Update: When the length of tags inputted from suggestion box exceeds the length of the input box and on input of the next tag, the input box displays tags from first or it moves back to the first tag position and not from where the cursor was last placed as seen here - <a href="http://jqueryui.com/autocomplete/#multiple" rel="nofollow noreferrer">http://jqueryui.com/autocomplete/#multiple</a>. This has been fixed.</p> <p>This is a similar fiddle with only ONE array used and suggestions always at width of the longest suggestion - <a href="http://jsfiddle.net/jc92619/3yTPJ/3/" rel="nofollow noreferrer">FIDDLE</a></p> <p>Thanks to Jeffery To who provided the main solution to the question, and to Vadim and Dom whose answers provided ideas that were useful in creating the above mod.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload