在两个字段上自动完成ajax

时间:2014-02-03 12:09:58

标签: javascript php jquery ajax autocomplete

我无法成功执行以下代码。我想从第一个字段(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 ..

2 个答案:

答案 0 :(得分:0)

试试这个,

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
    });

答案 1 :(得分:0)

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

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