在两个字段上自动完成 ajax答案

【问题标题】：autocomplete ajax on two fields在两个字段上自动完成 ajax
【发布时间】：2014-02-03 12:09:58
【问题描述】：

我无法成功执行以下代码。我想从成功的第一个字段（drug1）上的服务器获取自动完成数据。我希望第二个字段（drugdose1）应该根据第一个字段（drug1）的值返回结果。但我无法将 drug1 的值传递给 php 文件。 firefox 调试显示为 localhost/lib/searchdose.php?d=&q=xx。

代码如下：

<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type='text/javascript' src='lib/autocompletefull.js'></script>
<link rel="stylesheet" type="text/css" href="lib/autocomplete.css" />

<script type="text/javascript">

$(function() { 

    $("#drug1").autocomplete('lib/search.php', {
       delay:100,        
        maxItemsToShow: 15,
       minChars:2,
       useCache:false
    });

    $("#drugdose1").autocomplete('lib/searchdose.php', {
       delay:100,
       minChars:2,
       extraParams: { d: $("#drug1").val() }
    });

});

</script>
</head><body>
<p>
<form name="hello">
<input type="hidden" id="testing" value="hi there">
Drug Name: <input type="text" tabindex="1" size="40" name="drug1" id="drug1">
</p>
<p>Drug Dose: <input tabindex="2" type="text" name="drugdose1" id="drugdose1" size="35">
</p>
</form>

我正在使用来自 https://github.com/dyve/jquery-autocomplete 的 autocomplete.js ...我没有使用 jquery.ui autcomplete ..

【问题讨论】：

请注意，我没有使用来自 [link]github.com/dyve/jquery-autocomplete[/link] 的 autocomplete.js，因为与 jquery UI 自动完成相比，这是一个小型脚本...

标签： javascript php jquery ajax autocomplete

【解决方案1】：

试试这个，

src = 'lib/searchdose.php';


    $("#drugdose1").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: src,
                dataType: "json",
                data: {
                    d: $("#drug1").val()
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        min_length: 3,
        delay: 300
    });

【讨论】：

OP 没有使用 jQuery UI 自动完成功能。
你怎么知道提问的人是在使用jquery-ui自动补全？
@SalmanA 抱歉，我猜他使用的是lib/autocompletefull.js。
上面的代码不起作用，因为我没有使用 jquery-ui 自动完成...我正在使用来自github.com/dyve/jquery-autocomplete 的自动完成，因为它的尺寸很小..

【解决方案2】：

我自己解决了这个问题。这是解决方案：

    <script type="text/javascript">
var dname; 

function newv ()
{
    dname = $("#drug1").val();
    $("#drugdose1").autocomplete('lib/searchdose.php', {
       delay:100,
       maxItemsToShow: 15,
       extraParams: { d:dname },
       minChars:1,
       useCache:false
    });
    alert("Hello");
}

$(function() { 

    $("#drug1").autocomplete('lib/search.php', {
       delay:100,        
       maxItemsToShow: 15,
       minChars:2
    });

});

</script>

</head><body>
<p>
<form name="hello">
<input type="hidden" id="testing" value="hi there">
Drug Name: <input type="text" tabindex="1" size="40" name="drug1" id="drug1" onchange="javascript:newv();">
</p>

<p>Drug Dose: <input tabindex="2" type="text" name="drugdose1" id="drugdose1" size="35">
</p>
</form>

【讨论】：