douluozhan4370 2014-04-04 12:18
浏览 160
已采纳

jQuery UI Autocomplete可以使用来自多个输入字段的值

I've been struggling with this code for a while and honestly I'm stuck.

This is how my auto-complete script looks like:

jQ19(function(){
    // minLength:1 - how many characters user enters in order to start search
    jQ19('#location_name').autocomplete({

        source:'adress.php',
        minLength:2,
        select: function(event, ui){

            // just in case you want to see the ID
            var accountVal = ui.item.value;
            console.log(accountVal);

            // now set the label in the textbox
            var accountText = ui.item.label;
            jQ19('#location_name').val(accountText);

            return false;
        },
        focus: function( event, ui ) {
            // this is to prevent showing an ID in the textbox instead of name
            // when the user tries to select using the up/down arrow of his keyboard
            jQ19( '#location_name' ).val( ui.item.label );
            return false;
        }

    });

});

Some more js to get me the additional value:

<script type='text/javascript'>
    $('#city').on( 'change', function () {
        var x = document.getElementById('city').value;
        $.ajax({
            type: 'post',
            url: 'http://localhost/profsonstage/account/_compettions/autocomplate/location_name.php',
            data: {
                value: x
            },
            success: function( data ) {
                console.log( data );
            }
        });
    });
</script>*/

And the php that fetches the data results:

try {
    $con = new PDO("mysql:host={$host};dbname={$db_name}", $username, $password);
}catch(PDOException $exception){ //to handle connection error
    echo "Connection error: " . $exception->getMessage();
}

// get the search term
$city = $_GET['city'];
$b = explode(" ",$city); //get rid of the city code
$a =$b[0];

$search_term = isset($_REQUEST['term']) ? $_REQUEST['term'] : "";

//query to search for data
$query = "SELECT * from locations where adress like '%$search_term%' and city=='$a'
LIMIT 0 , 5";

The problem is when the user types a value in the input for the #City the query looks like this:

$query = "SELECT * from locations where adress like '%%' and city=='SomeCity' LIMIT 0 , 5";

and when we go to the next input that (is supposed to be autocomplete too and start typing) the query looks like

$query = "SELECT * from locations where adress like '%input to autocomplate%' and city=='' LIMIT 0 , 5";

Basically I can't figure out a way to pass the values at the same time. Any help will be appreciated.

  • 写回答

1条回答 默认 最新

  • dtyyrt4545 2014-04-04 12:52
    关注

    You can use following;

    jQ19(function(){
        // minLength:1 - how many characters user enters in order to start search
        jQ19('#location_name').autocomplete({
    
            minLength:2,
            select: function(event, ui){
    
                // just in case you want to see the ID
                var accountVal = ui.item.value;
                console.log(accountVal);
    
                // now set the label in the textbox
                var accountText = ui.item.label;
                jQ19('#location_name').val(accountText);
    
                return false;
            },
            source: function( request, response ) {
                var term = request.term;
    
                $.getJSON( "address.php?term=" + term + "&city=" + $("#city").val(), request, function( data, status, xhr ) {
                  response( data );
                });
            },
            focus: function( event, ui ) {
                // this is to prevent showing an ID in the textbox instead of name
                // when the user tries to select using the up/down arrow of his keyboard
                jQ19( '#location_name' ).val( ui.item.label );
                return false;
            }
    
        });
    
    });
    

    And in your php file;

    try {
        $con = new PDO("mysql:host={$host};dbname={$db_name}", $username, $password);
    }catch(PDOException $exception){ //to handle connection error
        echo "Connection error: " . $exception->getMessage();
    }
    
    
    // get the search term
    $city = $_GET['city'];
    $b = explode(" ",$city); //get rid of the city code
    $a =$b[0];
    
    $search_term = isset($_REQUEST['term']) ? $_REQUEST['term'] : "";
    
    //query to search for data
    $query = "SELECT * from locations where adress like '%$search_term%' and city=='$a'
    LIMIT 0 , 5";
    
    //Fetch your data and respond json
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 Arcgis相交分析无法绘制一个或多个图形