0

我是 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 中的错误控制台没有显示任何错误。

4

4 回答 4

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
    });
}
于 2012-04-16T07:44:07.957 回答
0

最好的解决方案是在选择两个单选按钮之一时禁用自动完成。通过将方法名作为 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);
});

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

$('.classOfTheTwoRadioButtons').change(function(e) {
  var $e = $(e.target);
  $('#firstTextBox').toggle($e.val() === 'value1');
  $('#secondTextBox').toggle($e.val() === 'value2');
});
于 2012-04-16T07:42:13.310 回答
0

given that radio button with value 'a' enables the autocomplete and the one with value 'b' disables it

$(".myRadio[value='a']").click(function() {
    $('#intext').autocomplete('enable');
}
$(".myRadio[value='b']").click(function() {
    $('#intext').autocomplete('disable');
}
于 2012-04-16T08:07:13.263 回答
0

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

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

于 2012-04-16T07:43:08.953 回答