Geek asks and answers

JQuery Autocomplete how to allow user to enter input that does not match the values ​​in the source

I have autocomple.I would like to provide the user with the ability to select an item from the source, which is standard functionality. But I would also like the user to be able to type any value, and when 0 elements are mapped in the source, allow the user to enter a new value.

I tried the following:

    $("#rwF1, #rwF2").autocomplete({
        source: itemshere,

        select: function(event, ui) {
           console.log('selection made'); 

        }

    }).bind('keydown', function() {
        var key = event.keyCode;
        if (key == $.ui.keyCode.ENTER || key == $.ui.keyCode.NUMPAD_ENTER) {
            console.log('user submitted content');
        }
    });

For keydown binding, the problem is that it always works even when selected. How can I make a snap lock only run if the user hasn’t selected an item from autocomplete? Is there a way that can be detected for a user who has selected an item?

thank

+3
3

data-* input, , , .

, :

$("#rwF1, #rwF2").autocomplete({
    source: itemshere,
    select: function(event, ui) {
        $(this).data("selected", true);
    }
}).bind("keydown", function(e) {
    var $this = $(this);

    /* Use e.which, jQuery has normalized it across browsers */
    if (e.which === $.ui.keyCode.ENTER || 
        e.which === $.ui.keyCode.NUMPAD_ENTER) {

        /* If they selected an item... */
        if (!$this.data("selected")) {
            console.log("new item");
        } else {
            console.log('existing');
        }
    } else {
        $this.data("selected", false);
    }
});

: http://jsfiddle.net/aAD6W/2/

, , , , select . , ( , ).

+1

,
Jquery, :)
JS -

        $(function() {
                    (function( $ ) {
                $.widget( "ui.combobox", {
                        _create: function() {
                            var self = this,
                                select = this.element.hide(),
                                selected = select.children( ":selected" ),
                                value = selected.val() ? selected.text() : "";
    // Change 1  Added selector instead of actual HTML so you can use this with any input                       
    var input = this.input = $( "#input_id" )    // your input box
                                .insertAfter( select )
                                .val( value )
                                .autocomplete({
                                    delay: 0,
                                    minLength: 0,
                                    source: function( request, response ) {
                                        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
                                        response( select.children( "option" ).map(function() {
                                            var text = $( this ).text();
                                            if ( this.value && ( !request.term || matcher.test(text) ) )
                                                return {
                                                    label: text.replace(
                                                        new RegExp(
                                                            "(?![^&;]+;)(?!<[^<>]*)(" +
                                                            $.ui.autocomplete.escapeRegex(request.term) +
                                                            ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                                        ), "<strong>$1</strong>" ),
                                                    value: text,
                                                    option: this
                                                };
                                        }) );
                                    },
                                    select: function( event, ui ) {
                                        ui.item.option.selected = true;
                                        self._trigger( "selected", event, {
                                            item: ui.item.option
                                        });
                                    },
                                    change: function( event, ui ) {
                                        if ( !ui.item ) {
                                        var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
                                            valid = false;
                                            select.children( "option" ).each(function() {
                                            if ( $( this ).text().match( matcher ) ) {
                                            this.selected = valid = true;
                                            return false;
                                            }
                                            });
// Change 2 Commented this block so that user can enter value other than select  options                                            
//if ( !valid ) {
                                                // remove invalid value, as it didn't match anything
                                                //$( this ).val( "" );
                                                //select.val( "" );
                                                //input.data( "autocomplete" ).term = "";
                //return false;
                    //                      }
                                        }
                                    }
                                })
                                .addClass( "ui-widget ui-widget-content ui-corner-left" );

                            input.data( "autocomplete" )._renderItem = function( ul, item ) {
                                return $( "<li></li>" )
                                    .data( "item.autocomplete", item )
                                    .append( "<a>" + item.label + "</a>" )
                                    .appendTo( ul );
                            };

                            this.button = $( "<button type='button'>&nbsp;</button>" )
                                .attr( "tabIndex", -1 )
                                .attr( "title", "Show All Items" )
                                .insertAfter( input )
                                .button({
                                    icons: {
                                        primary: "ui-icon-triangle-1-s"
                                    },
                                    text: false
                                })
                                .removeClass( "ui-corner-all" )
                                .addClass( "ui-corner-right ui-button-icon" )
                                .click(function() {
                                    // close if already visible
                                    if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
                                        input.autocomplete( "close" );
                                        return;
                                    }

                                    // work around a bug (likely same cause as #5265)
                                    $( this ).blur();

                                    // pass empty string as value to search for, displaying all results
                                    input.autocomplete( "search", "" );
                                    input.focus();
                                });
                        },

                        destroy: function() {
                            this.input.remove();
                            this.button.remove();
                            this.element.show();
                            $.Widget.prototype.destroy.call( this );
                        }
                    });
                })( jQuery );
                    $( "#combobox" ).combobox();
                    $( "#toggle" ).click(function() {
                        $( "#combobox" ).toggle();
                    });
                });

HTML

<select id="combobox">
    <option value="">Select one...</option>
    <option value="ActionScript">ActionScript</option>
    <option value="AppleScript">AppleScript</option>
    <option value="Asp">Asp</option>
        <option value="BASIC">BASIC</option>
</select>

Id css input, jquery js . ( 1)

.

0

keyUp? , "", , , , , . :

var jobs = new Array();

for (var i = 0; i < data.length; i++) { //data comes from AJAX call
    jobs[i] = { label: data[i].Value, text: data[i].Text };
}

$("#ContactJobTitleName").autocomplete({
    source: jobs,
    select: function (event, item) {
        $("#ContactJobTitleId").val(item.item.text);
    }
});

reset , : 7

$("#ContactJobTitleName").keyup(function (e) {
    if (e.which == 8 && $(this).val().length == 0) {
        $("#ContactJobTitleId").val(0);
    }
});
0

More articles:


All Articles