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添加或删除类别棒。

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

1 个答案: