我需要从MySQL数据库获取数据并将其放入一个JSON数组中，然后将该JSON数组用于文本框自动完成。

Question

我需要从MySQL数据库获取数据并将其放入一个JSON数组中，然后将该JSON数组用于文本框自动完成。

4

我需要从MySQL数据库中获取数据并将其放入JSON数组中，然后使用该JSON数组进行文本框自动完成。我可以使用单独的PHP文件从数据库中加载数据并在ajax中使用它来实现这一点...... 但是我正在尝试使用一个PHP文件来完成此操作...... 这可能吗？如何操作。

<script>
$(document).on('keyup','.jornal', function(){
    var thisRow = $(this).data('value');        

    if(event.which != 13){
        //itemSearchDisables(thisRow);
    }
    autoTypeNo2=1 ;
    autoTypeNo1=0 ;

    $(this).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url : 'AJAX_Requst/bill_itemDetail.php',
                dataType: "json",
                method: 'post',
                data: {
                  ID: request.term 
                },
                 success: function( data ) {
                     response( $.map( data, function( item ) {
                        var code = item.split("|");
                        if(code[0] == 'Login Please'){
                            //window.location = '../login.php';                                         
                        }
                        return {
                            label: code[autoTypeNo2] + ' | '+ code[3],
                            value: code[autoTypeNo1],
                            data : item
                        }
                    }));
                }
            });
        },
        autoFocus: true,            
        minLength: 0,
        select: function( event, ui ) {
            var names = ui.item.data.split("|");                        
            id_arr = $(this).attr('id');
            id = id_arr.split("_");
            //itemSearchEnables(thisRow);
            $('#itemNo_'+id[1]).val(names[0]);
            $('#itemName_'+id[1]).text(names[1]);           

        }               
    });

});

</script>

这是我现在已经做的加载数据工作，目前一切正常。

- Nasik Ahd

2个回答

0

我认为从我的角度来看这是可能的。这样你就不必在自动完成函数中发布ajax表单。

首先，像往常一样从MySQL数据库检索数据。
接下来，将这些数据存储在javascript的var中。
最后，您可以使用var进行文本框自动完成。

- Lotto Kuma

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Snm · Accepted Answer

如果我理解正确的话，在同一个php文件中创建json数组，并将该数组传递给javascript函数。它应该像下面这样：

<script>
  $(function() {
    var availableTags = [<?php $jsonArray ?>];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>

如果是这种情况，请尝试使用这个方法

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Custom data and display</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #project-label {
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
  }
  #project-icon {
    float: left;
    height: 32px;
    width: 32px;
  }
  #project-description {
    margin: 0;
    padding: 0;
  }
  </style>
  <script>
  $(function() {
    var projects = [
      {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
      },
      {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        icon: "sizzlejs_32x32.png"
      }
    ];

    $( "#project" ).autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        $( "#project-id" ).val( ui.item.value );
        $( "#project-description" ).html( ui.item.desc );
        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
        .appendTo( ul );
    };
  });
  </script>
</head>
<body>

<div id="project-label">Select a project (type "j" for a start):</div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>


</body>
</html>