Question

我是jQuery的新手，在找出问题时遇到了一些麻烦。

我有一个在页面底部调用的函数，用于将自动完成功能附加到文本框，这部分工作正常。以下是调用以启用自动完成的代码：

$(function(){
    $('#intext').autocomplete('get-data.php?mode=sql', {
        width: 400,
        max: 5,
        selectFirst: false
    });
});

但是，搜索框包含两个用于两种不同类型搜索的单选按钮。自动完成功能仅适用于一种类型的搜索。

所以我的问题是，如何通过单击一个单选按钮启用此功能，并通过单击第二个单选按钮将其禁用？

修改

自动完成脚本有一个.autocomplete（“disable”）方法，但我不知道如何根据选中的单选按钮启用/禁用它。

编辑2

我正在尝试使用“Rory McCrossan”建议的方法来工作，因为我正在使用jQuery UI Autocomplete。这是我的单选按钮和搜索框的代码：

News: <input type="radio" class="myRadio" name="search_type" value="news" checked="checked" onclick="this.form.action='/search.php';" />
Media Gallery: <input type="radio" class="myRadio" name="search_type" value="media" onclick="this.form.action='/media.php';" />
<input id="intext" class="txt" type="text" name="searchterms" />

我在每个页面上运行的脚本中都有以下代码：

addAutoComplete($("#intext"));

$(".myRadio").change(function() {
    if ($(this).val() == "news") {
        if (!$("#intext").hasClass("ui-autocomplete-input"))
            addAutoComplete($("#intext"));
    }
    else {
        $("#intext").autocomplete('destroy')
    }
});


function addAutoComplete($el) {
    $('#intext').autocomplete('autocomplete-data.php?mode=sql', {
        width: 400,
        max: 5,
        selectFirst: false
    });

}

这似乎不起作用，Firefox中的错误控制台不会显示任何错误。

Answer 1

假设这是jQueryUI自动完成，您可以使用$el.autocomplete("destroy")删除自动完成功能。

addAutoComplete($("#intext")); // on load

$(".myRadio").change(function() {
    if ($(this).val() == "a") {
        if (!$("#intext").hasClass("ui-autocomplete-input"))
            addAutoComplete($("#intext"));
    }
    else {
        $("#intext").autocomplete('destroy')
    }
});

function addAutoComplete($el) { 
    $el.autocomplete('get-data.php?mode=sql', {
        width: 400,
        max: 5,
        selectFirst: false
    });
}

Answer 2

最佳解决方案是在选择两个单选按钮之一时禁用自动完成功能。通过将methodname作为jQuery插件调用的第一个参数来调用jQuery UI方法。例如：“

// First create the autocomplete
$('#textbox1').autocomplete();

// call a method on the 'autocompleted' textbox
$('#textbox1').autocomplete('methodname', 'methodparam1', methodparam2, etc)

所以在这种情况下：

$('.classOfTheTwoRadioButtons').change(function(e) {
  var method = $(e.target).is(':checked [value=valueIfAutocomplete]')? 'enable': 'disable';
  $('#textbox').autocomplete(method);
});

其他选项：创建两个具有相同名称的文本框，并仅在其中一个上附加自动填充。使用jquery的toggle()功能隐藏您在选中所选单选按钮时不想看到的功能。

$('.classOfTheTwoRadioButtons').change(function(e) {
  var $e = $(e.target);
  $('#firstTextBox').toggle($e.val() === 'value1');
  $('#secondTextBox').toggle($e.val() === 'value2');
});

Answer 3

您应该检查autocomplete()插件是否有某种destroy动作可以消除他的行为。如果是这样，请在选择“自动完成关闭”无线电时调用它。

如果您的插件没有该选项，只需创建文本字段即可。第一个附加自动完成，第二个没有它。然后根据您的复选框切换它们。

Answer 4

如果值为'a'的单选按钮启用自动完成功能，而值为'b'的单选按钮则禁用它

$(".myRadio[value='a']").click(function() {
    $('#intext').autocomplete('enable');
}
$(".myRadio[value='b']").click(function() {
    $('#intext').autocomplete('disable');
}

打开和关闭jQuery函数

4 个答案: