如何使用 Jquery 更改带有单选按钮组的输入文本类

Question

我有一个带有两个单选按钮的单选组和一个用于自动完成的输入文本。我的目标是使用单选按钮来更改输入文本的类别。这样，我可以根据选择的单选按钮使用“cod”或“descricao”自动完成输入文本。

我试过了：

    <script type="text/javascript">  

        $(document).ready( function($) 
        {                                   

            $(function()        
            {               
                $('input[name=buscarPor]:radio').click(function()
                {   
                    if($('#descricao').attr('checked'))
                    {
                        $('#term').attr('class', 'descricao');
                        $('#term').attr('placeholder', 'product name');
                    }
                    else
                    {
                        $('#term').attr('class', 'cod');
                        $('#term').attr('placeholder', 'product code');
                    }
                    $('#term').focus();
                });             
            });                 

            $('.descricao').autocomplete(
            {  
                source: 'buscaDesc.php',  
                minLength:2,                                        
                // optional                                 
                html: true,                                         
                // optional (if other layers overlap the autocomplete list)
                open: function (event, ui)                                      
                {                                                   
                    console.log($(this).val(ui.item.label));    

                    return false;                               
                },                                          
                select: function(event, ui)                     
                {                                           
                    $('#term').val(ui.item.value);
                    $('form#frmBusca').submit();
                }           
            });

            $('.cod').autocomplete(
            {  
                source: 'buscaCod.php',  
                minLength:2,                                        
                // optional                                 
                html: true,                                         
                // optional (if other layers overlap the autocomplete list)
                open: function (event, ui)                                      
                {                                                   
                    console.log($(this).val(ui.item.label));    

                    return false;                               
                },                                          
                select: function(event, ui)                     
                {                                           
                    $('#term').val(ui.item.value);
                    $('form#frmBusca').submit();
                }           
            });
        });                                 

    </script> 

也尝试使用 addClass 和 removeClass 但都不起作用。

这里是html

    <center>

        <div  style="width:400px">
            <form name="frmBusca" id="frmBusca" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

                <div>   
                    <label style="width:300px; font-size:14px; font-weight:bold">Search product by:</label><br><br>

                    <label>Product name</label>
                    <input type="radio" name="buscarPor" id="descricao" style="width:20px;" value="descricao" /><br>

                    <label>Product Code</label>&nbsp;&nbsp;
                    <input type="radio" name="buscarPor" id="cod" style="width:20px;" value="cod"  checked  /><br><br>

                    <input type="text" style="width:150px;" name="term" id="term" class="cod" placeholder="Product code" value="" />
                </div>
            </form>
        </div>

    </center>                                               

还有一个简单的 PHP 来验证：

Answer 1

你不能那样做。

快速解答

每次添加或删除类时调用 .autocomplete。

原因。

当您第一次调用自动完成时，它仅适用于现有 DOM。一旦你改变了类，DOM 就会改变，原来的自动完成功能不会以你的新 DOM 为目标。因此，每次添加类时，您都需要再次调用 $().autocomplete。请务必在执行此操作之前删除以前的自动完成，否则您将遇到自动完成冲突。此外，如果您想添加或删除类坚持使用 .addClass 和 .removeClass。