Question

这是我的代码，

 <script language="javascript" type="text/javascript"> 
    jQuery(function(){
    $("#cname").autocomplete("list1.jsp");
    });
       $(document).ready(function(){
       $('div.ajaxx').delegate("#cname","change",function(){
            var env_id=ui.item.value;
            $.ajax({
                url:'dc_ajax.jsp',
                type:'POST',
                data:{count:env_id},
                success:function(data){
                    $('div.dc').html(data);
                },
                error:function(){
                $('div.dc').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
                }               
            });
        }); 

       });
</script>

在这段代码中，我想使用自动完成中的值选择来调用ajax。但是当我尝试使用它时，它显示空值但在重定向到另一个页面时，它显示选定的值。那么如何在javascript中使用该值？

这是我的html代码，其中ajax调用

        <div class='ajaxx'>
        <span style="font-family: 'Terminal Dosis Light', sans-serif;font-size: 20px"> <b>Select Customer :</b></span>  
          <input type="text" id="cname" name="cname" class="input_text" value="" required />
    <div class='dc' style="margin-top: 1em;"></div> 
    </div>

Answer 1

您可以使用Autocomplete change event之类的，

jQuery(function () {
    $("#cname").autocomplete({
        source: "list1.jsp",// your source
        change: function (event, ui) { // autocomplete changes
            var env_id = ui.item.value;// you will get here, in your case it is undefined
            $.ajax({
                url: 'dc_ajax.jsp',
                type: 'POST',
                data: { count: env_id },
                success: function (data) {
                    $('div.dc').html(data);
                },
                error: function () {
                    $('div.dc').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
                }
            });
        }
    });
});

或者试试Select-event。

Answer 2

您的代码以某种方式工作，几乎没有变化，但您可以在 working fiddle example 中看到，因为您使用了

$（ 'div.ajaxx'）。委托（ “＃CNAME”， “变更”，函数（）{

然后当您通过鼠标选择项目时，ajax不会启动，只有当您按Enter键时才会启动。

如果您想在自动填充中选择项目时执行某些操作，则需要使用选择自动填充功能事件

请注意： Working fiddle example

HTML：

<div class='ajaxx'> <span style="font-family: 'Terminal Dosis Light', sans-serif;font-size: 20px">
         <b>Select Customer :</b>
     </span> 
    <input type="text" id="cname" name="cname" class="input_text" value="" required />
    <div id='dc' style="margin-top: 1em;"></div>
</div>

JS：

$('#cname').autocomplete({
    source: ["Saab", "Volvo", "BMW", "One", "Oneeee", "Onayyy"],
    select: function (event, ui) {
        var env_id = ui.value;
        $.ajax({
            url: 'dc_ajax.jsp',
            type: 'POST',
            data: {
                count: env_id
            },
            success: function (data) {
                $('#dc').html("data: " + data);
            },
            error: function () {
                $('#dc').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
            }
        });
    }
});

如何使用值在同一页面上的javascript中自动完成选择

2 个答案: