每个单词下方的jQuery-ui自动完成下拉菜单 [英] Jquery-ui autocomplete dropdown below each word

问题描述

我正在使用jquery-ui中的（2013年2月16日更新）

功能：

1）固定了多个单词排序反对建议的字母顺序（ jQuery-ui自动完成多个值按字母顺序对结果进行排序）

2）从2个数组中检索建议，第一个建议在输入框的全宽处打开，例如在google中，其余建议在最长建议的宽度处打开

3）固定在空格（多个值）之后输入单词之前打开下拉菜单的错误。

4）在添加中间的单词时，防止下拉菜单在结尾处保持打开状态。

5）16/2/2013更新：当从建议框中输入的标签长度​​超过的长度时输入框并在输入下一个标签时，输入框从第一个显示标签，或者它移回到第一个标签位置，而不是从光标最后放置的位置，如下所示- http://jqueryui.com/autocomplete/#multiple 。

这是一个类似的提琴，只使用了一个数组，并且建议始终处于最长建议的宽度-字段

感谢杰弗里（Jeffery）为这个问题提供了主要解决方案，

解决方案

正如其他答案所建议的那样，Vadim和Dom的回答提供了对创建上述mod有用的想法。我们测量输入字段中文本的宽度（使用隐藏元素），然后偏移自动完成框。我们还可以重置自动完成框的宽度，以使其仅与最长的建议一样宽（演示）：

  open：function（event，ui）{
 var input = $（event.target），
 widget = input.autocomplete（ widget），
 style = $ .extend（input.css（[
 font，
 border-left，
 padding -left 
]），{
位置：绝对，
可见性：隐藏，
填充右：0，
 border- right：0，
空白： pre 
}），
 div = $（< div />），
 pos = { 
 my：左上，
碰撞：无 
}，
偏移= -7； //将文本字段中的第一个字母
 //与建议的第一个字母
 //对齐的幻数// 
 //的样式取决于自动填充框
 $的样式b $ b widget.css（ width，）; 
 
 div 
 .text（input.val（）。replace（/ \S * $ /，）））
.css（样式）
。 insertAfter（输入）; 
 offset = Math.min（
 Math.max（offset + div.width（），0），
 input.width（）-widget.width（）
）; 
 div.remove（）; 
 
 pos.at = left + +偏移量+ bottom; 
 input.autocomplete（ option， position，pos）; 
 
 widget.position（$ .extend（{of：input}，pos））; 
} 
  

更新：已修复自动完成框定位

更新2：另一个自动完成框定位修复程序

I'm using Autocomplete 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?

EDIT: Example (Google-like search box):

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

My function is this big because it has features of multiple words and displaying array in order of alphabets. Here is the <script 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>

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.

UPDATE: Here is the final mod of the google-like autocomplete: Fiddle (Updated 16/2/2013)
Features:
1) Fixed multiple words sort alphabetically against suggestions (jQuery-ui autocomplete multiple values sort results alphabetically)
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
3) Fixed bugs of dropdown opening before input of word after 'space' (multiple values).
4) Prevent dropdown from being kept open at the end while adding words in between.
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 - http://jqueryui.com/autocomplete/#multiple. This has been fixed.

This is a similar fiddle with only ONE array used and suggestions always at width of the longest suggestion - FIDDLE

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.

解决方案

As the other answers have suggested, we measure the width of the text in the input field (using a hidden element), then offset the autocomplete box. We can also reset the width of the autocomplete box so that it's only as wide as the longest suggestion (demo):

open: function( event, ui ) {
    var input = $( event.target ),
        widget = input.autocomplete( "widget" ),
        style = $.extend( input.css( [
            "font",
            "border-left",
            "padding-left"
        ] ), {
            position: "absolute",
            visibility: "hidden",
            "padding-right": 0,
            "border-right": 0,
            "white-space": "pre"
        } ),
        div = $( "<div/>" ),
        pos = {
            my: "left top",
            collision: "none"
        },
        offset = -7; // magic number to align the first letter
                     // in the text field with the first letter
                     // of suggestions
                     // depends on how you style the autocomplete box

    widget.css( "width", "" );

    div
        .text( input.val().replace( /\S*$/, "" ) )
        .css( style )
        .insertAfter( input );
    offset = Math.min(
        Math.max( offset + div.width(), 0 ),
        input.width() - widget.width()
    );
    div.remove();

    pos.at = "left+" + offset + " bottom";
    input.autocomplete( "option", "position", pos );

    widget.position( $.extend( { of: input }, pos ) );
}

Update: Fixed autocomplete box positioning

Update 2: Another autocomplete box positioning fix

这篇关于每个单词下方的jQuery-ui自动完成下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！