如何使用带有Jquery的单选按钮组更改输入文本类(How to change an input text class with radio buttons group with Jquery)

如何使用带有Jquery的单选按钮组更改输入文本类(How to change an input text class with radio buttons group with Jquery)

我有一个带有两个单选按钮的收音机组，以及一个用于自动完成的输入文本。 我的目标是使用单选按钮来更改输入文本的类。 这样，我可以使用“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来验证：

I have a radio Group with two radio buttons, and a input text for autocomplete. My goal is to use the radio button to change the class of input text. This way, I can autocomplete the input text using "cod" or "descricao" depending what radio button is selected.

I,ve tried:

<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>

also tried with addClass and removeClass but either don't work.

Here goes the 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>

And a simple PHP to verify:

最满意答案

你不能这样做。

快速回答

每次添加或删除课程时都要调用.autocomplete。

原因。

当您第一次调用自动完成时，它仅适用于现有DOM。 更改类后，DOM会更改，原始自动完成功能不会以新DOM为目标。 因此，每次添加课程时，您都需要再次调用$（）。autocomplete。 请务必先删除之前的自动填充功能，否则您的自动填充功能会发生冲突。 此外，如果您想使用.addClass和.removeClass添加或删除类棒。

You cant do that way.

Quick answer

Call .autocomplete everytime you add or remove class.

Reason.

When you call autocomplete for the first time it is only for the existing DOM. Once you change the class the DOM changes and the original autocomplete will not target your new DOM. So everytime you add class you need to call $().autocomplete again. Be sure to remove the previous autocomplete before you do though or you will have conflicting autocomplete. Also if you want to add or remove class stick with .addClass and .removeClass.