Didn"t forge 2016-05-26 06:29 采纳率: 25%
浏览 15

自动完成多个字段

I want the autocomplete using AJAX. but it doesn't display anything when i type on the textbox. It would be great if you find the problem.

 <html>
  <head>
 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
 <link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />
<script src="js/jquery-1.10.2.min.js"></script> 
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>

  <script type="text/javascript">
 $('#item_1').autocomplete({
    source: function( request, response ) {
        $.ajax({
            url : 'ajax.php',
            dataType: "json",
            data: {
               name_startsWith: request.term,
               type: 'item_table',
               row_num : 1
            },
             success: function( data ) {
                 response( $.map( data, function( item ) {
                    var code = item.split("|");
                    return {
                        label: code[0],
                        value: code[0],
                        data : item
                    }
                }));
            }
        });
    },
    autoFocus: true,            
    minLength: 0,
    select: function( event, ui ) {
        var names = ui.item.data.split("|");                        
        $('#code_1').val(names[1]);
        $('#description_1').val(names[2]);
        $('#quantity_1').val(names[3]);
    }               
});
 </script>
 </head>

 <body>
 <form action=""  method="post" >
    <input type="text" name="item[]" id="item_1" class="ui-autocomplete-input">
    <input type="text" name="code[]" id="code_1" class="ui-autocomplete-input">
    <input type="text" name="description[]" id="description_1" class="ui-autocomplete-input">
    <input type="text" name="quantity[]" id="quantity_1" class="ui-autocomplete-input">
 </form>
</body>
</html>

AJAX.PHP My query when will find the search keyword and will display automatically on multiple textboxes. 

require_once 'dbconnection.php';
if($_POST['type'] == 'item_table'){
    $row_num = $_POST['row_num'];
    $result = mysqli_query($conn, "SELECT item, code, description, quantity FROM item_tb where item LIKE '".strtoupper($_POST['name_startsWith'])."%'");    
    $data = array();
    while ($row = mysqli_fetch_assoc($result)) {
        $name = $row['item'].'|'.$row['code'].'|'.$row['description'].'|'.$row['quantity'].'|'.$row_num;
        array_push($data, $name);   
    }   
    echo json_encode($data);
}


?>
  • 写回答

1条回答 默认 最新

  • weixin_33737774 2016-05-26 08:12
    关注

    I done this before some time on a site, check its header's search bar: http://jhm.co.nz/

    I customized it for you, my json looks like:

    [
    {"id":"1","type":"product","name":"Q10 Soy oner"},
    {"id":"3","type":"product","name":"SoyLotion Toner"}
]

    and my script is:

    $(function() {
    $( "#headerSearch" ).autocomplete({
        minLength: 1,
        source: 'https://www.jhm.co.nz/ajaxSearch.php',
        focus: function( event, ui ) {
            name = ui.item.name;
            $( "#headerSearch" ).val( name );
            return false;
        },
        select: function( event, ui ) {

            $( "#headerSearch" ).val( ui.item.name );
            $( "#headerSearchId" ).val( ui.item.id );
            $( "#headerSearchType" ).val( ui.item.type );
            return false;
        }

}).autocomplete( "instance" )._renderItem = function( ul, item ) {
        document.getElementById('headerSearch').className='ui-autocomplete-input';
        return $( "<li>" ).append( "<a>" + item.name + "</a>" ).appendTo( ul );
    };
})

    #headerSearchId, #headerSearchType are ids of hidden fields, in my case, you just make 3 input text fields and give them ids like #headerSearch, #headerSearchId, #headerSearchType, autocomplete will apply on #headerSearch, also need to modify your json, like my above.

    评论

报告相同问题？

悬赏问题

  • ¥15 想问一下树莓派接上显示屏后出现如图所示画面，是什么问题导致的
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差（基于双目相机）
  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号