通过POST在jQuery UI自动完成结果上单击传递值

时间:2016-07-19 19:30:02

标签: jquery jquery-ui post jquery-ui-autocomplete

我正在尝试使用POST将所选项的id值传递给search.php文件。如果我使用GET它可以正常工作,但如果我使用POST则不起作用。

这是我的代码:

$( function() {
    $( ".search" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "/_inc/autocomplete.php",
                dataType: "json",
                data: {
                    q: request.term
                },
                success: function( data ) {
                    response( data );
                    console.log(data);
                }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            //alert('selected: ' + ui.item.name);
            var id = ui.item.id;
            $.post("/search.php", {"id": id});
            $(location).attr('href', '/search.php');
        }
    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        if(item.label == 'No Match Found'){
            return $( "<li>" )
            .data( "item.autocomplete", item )
            .append( item.value )
            .appendTo( ul )
            .css("cursor", "default");
        } else {
            return $( "<li>" )
            .data( "item.autocomplete", item )
            .append( ("<a>" + item.id + " - " + item.name + "</a>") )
            .appendTo( ul );
        }
    };
});

数据源从数据库中提取并使用PHP转换为JSON。

1 个答案:

答案 0 :(得分:0)

在完成上述评论中建议的Q&amp; A之后,我设法让它发挥作用。 jQuery Autocomplete使用GET传递变量,所以我不得不使用AJAX调用来传递变量而不是html数据类型。这是代码:

var id = ui.item.id;

$.ajax({
    url: "/search.php",
    type: "POST",
    dataType: 'html',
    data: { id: id },
    success: function(data){
        alert(data);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("ERROR:" + xhr.responseText+" - "+thrownError);
    }
});