Question

我使用jQuery将标准选择转换为组合框。

<select name="Searchby" id="Searchby">
    <option value="all" >All Departments</option>
    <option value="music" >Music</option>
    <option value="dvd" >DVD</option>
    <option value="bluray" >Bluray</option>
    <option value="Artist" >Artist</option>
</select>

然后我有一个输入，其中包含jQuery的自动填充类别。当一个人输入输入时，它会返回可在不同类别中选择的选项。如果他们点击某个选项，我希望它更改上面选择中选择的内容。这是我尝试的代码。

$("#Search").catcomplete({
    delay: 1000,
    source: "Drop_Down_Search.php",
    select: function(event, ui) {
        if (ui.item.category = 'Artist') {
            $('#Searchby').val('Artist');
            console.log(ui.item.category);
        }
    }
});

控制台正在记录它正在运行并且它正确地发布到搜索结果页面，但在您离开页面之前不会更改。它只是作为“所有部门”。我需要对其进行更改，以便正在搜索的人可以看到他们只会在移动到搜索结果页面之前搜索“艺术家”或“蓝光”。

编辑：

好的，因为事实证明，如果没有在select上设置jquery组合框，它会改变值，但是当你使用jquery的组合框时它不会改变。

选择更改为组合框后，我应该使用什么来更改值？

这是组合框代码：

(function( $ ) {
    $.widget( "ui.combobox", {
        _create: function() {
            var input,
                that = this,
                wasOpen = false,
                select = this.element.hide(),
                selected = select.children( ":selected" ),
                value = selected.val() ? selected.text() : "",
                wrapper = this.wrapper = $( "<span>" )
                    .addClass( "ui-combobox" )
                    .insertAfter( select );

            function removeIfInvalid( element ) {
                var value = $( element ).val(),
                    matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i" ),
                    valid = false;
                select.children( "option" ).each(function() {
                    if ( $( this ).text().match( matcher ) ) {
                        this.selected = valid = true;
                        return false;
                    }
                });

                if ( !valid ) {
                    // remove invalid value, as it didn't match anything
                    $( element )
                        .val( "" )
                        .attr( "title", value + " didn't match any item" )
                        .tooltip( "open" );
                    select.val( "" );
                    setTimeout(function() {
                        input.tooltip( "close" ).attr( "title", "" );
                    }, 2500 );
                    input.data( "ui-autocomplete" ).term = "";
                }
            }

            input = $( "<input>" )
                .appendTo( wrapper )
                .val( value )
                .attr( "title", "" )
                .addClass( "ui-state-default ui-combobox-input" )
                .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;
                        that._trigger( "selected", event, {
                            item: ui.item.option
                        });
                    },
                    change: function( event, ui ) {
                        if ( !ui.item ) {
                            removeIfInvalid( this );
                        }
                    }
                })
                .addClass( "ui-widget ui-widget-content ui-corner-left" );

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

            $( "<a>" )
                .attr( "tabIndex", -1 )
                .attr( "title", "Select A Critera to Search In " )
                .appendTo( wrapper )
                .button({
                    icons: {
                        primary: "ui-icon-triangle-1-s"
                    },
                    text: false
                })
                .removeClass( "ui-corner-all" )
                .addClass( "ui-corner-right ui-combobox-toggle" )
                .mousedown(function() {
                    wasOpen = input.autocomplete( "widget" ).is( ":visible" );
                })
                .click(function() {
                    input.focus();

                    // close if already visible
                    if ( wasOpen ) {
                        return;
                    }

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

        },

        _destroy: function() {
            this.wrapper.remove();
            this.element.show();
        }
    });

    })( jQuery );
                $(function() {
        $( "#Searchby" ).combobox();
        $( "#toggle" ).click(function() {
            $( "#Searchby" ).toggle();
        }); });

Answer 1

我发现错误..

$( "#Search" ).catcomplete({
    delay: 1000,
    source: "Drop_Down_Search.php",
    select: function( event, ui ) {
        if (ui.item.category == 'Artist') {
                        -----^^-- missing `=` in if since your are comparing this
            $('#Searchby').val('Artist');
            console.log(ui.item.category);
        }
    }
});

//}); extra brakets..

Answer 2

我在这个答案中找到了我想要的东西

How to define selected value for jQuery UI combobox?

经过一些编辑，我来到了这个工作。

$('.ui-autocomplete-input').val($("#Searchby").val("Artist").val());

您选择的值是“艺术家”，Searchby是选择ID

为什么jQuery没有将我的选择设置为所选值

2 个答案: