我需要从 mysql DB 获取数据并将其放入 json 数组并使用 json 数组进行文本框自动完成答案

【问题标题】：i need to get data from mysql DB and put it to a json array and use the json array for textbox auto complete我需要从 mysql DB 获取数据并将其放入 json 数组并使用 json 数组进行文本框自动完成
【发布时间】：2016-01-18 14:53:14
【问题描述】：

我需要从 mysql DB 中获取数据并将其放入 json 数组并使用 json 数组进行文本框自动完成。我可以使用单独的 php 来从 db 加载数据并在 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>

这是我到现在为止加载数据所做的工作。它工作正常

【问题讨论】：

标签： php mysql arrays json

【解决方案1】：

如果我的理解是正确的，请在同一个 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>

【讨论】：

过滤器怎么样。如果我只是调用 availableTags 数组作为源，availableTags[0] = 'asd | 156 | STF01' , availableTags[1] = 'nsd | 056 | STF02' , availableTags[2] = '悲伤 | 106 | STF03'，每个数组都包含其他不用于过滤的细节，自动完成只过滤数组的第一部分，这清楚吗！

【解决方案2】：

从我的角度来看，我认为这是可能的。这样，您也不必在自动完成功能中发布 ajax 表单。

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

【讨论】：