jQuery自动完成，将参数传递到数据库中

时间：2018-03-15 10:43:18

标签： javascript php jquery ajax jquery-ui-autocomplete

Hlleo，请帮我解决这个问题，我从一个例子中得到了这个并且工作正常，

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>

  $(function() {
    var availableTags = [
    {key: "1",value: "NAME 1"},{key: "2",value: "NAME 2"},{key: "3",value: "NAME 3"},{key: "4",value: "NAME 4"},{key: "5",value: "NAME 5"}
     ];

    $( "#project-name" ).autocomplete({
      minLength: 0,
      source: availableTags,
      focus: function( event, ui ) {
        $( "#project-name" ).val( ui.item.value );
        return false;
      },
      select: function( event, ui ) {
        $( "#project-name" ).val( ui.item.value );
        $( "#project-id" ).val( ui.item.key );

        return false;
      } 
      });
  });
    </script>
<form action="search" method="post" >
<input id="project-name" name="project2" id="searchbox"/>
<input  type="text" id="project-id" />
</form>

但对我来说，我需要它来自数据库所以我将源称为url并将数据作为参数传递给它

但是在这里只有控制台部分可以工作，但输入没有填充，

我想要的是用标签值（标题ID）填充输入，并在从列表中选择项目时将id（task_summary_id）存储在另一个隐藏的输入字段中 < / p>

所以我这样做了原始代码

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>

  $(function() {
//      var output = '';
//            $('#project-name').keyup(function(){  
//           var query = $(this).val();  
//           if(query != '')  
//           {
//               console.log(query);
//                $.ajax({  
//                     url:"autoCompleteNew.php",  
//                     method:"POST",  
//                     data:{query:query,cl:4},  
//                     success:function(data)  
//                     {  
//                         console.log(data);
//                         output = data; 
//                         
//                            
//                         
//                         
//                     }  
//                });  
//           }  
//      });  

$("#project_name").autocomplete({
 //var output = ''; 
    source: function(request, response) {
        console.log(request.term);

        $.ajax({
            url: 'autoCompleteNew.php',
            method:"POST", 
            data: {
                query : request.term,
                cl : 4
            },
            success: function(data) {
                //response(data);
               // output = data;
                console.log(data); //here i am getting the correct log

               // var parsed = JSON.parse(data);

            },
           // console.log(output);


        });
    },
    focus: function( event, ui ) {
                      $( "#project_name" ).val( ui.item.value );// nothing here nothing in autocomplete
                      return false;
                    },
                    select: function( event, ui ) {
                      $( "#project_name" ).val( ui.item.value );// but nothing here
                      $( "#project-id" ).val( ui.item.key );

                      return false;
                    } 

});
//       $( "#project_name" ).autocomplete({
//                    minLength: 2,
//                    source: 'autoCompleteNew.php',
//                    data:{query:'gb',cl:4},
//                    focus: function( event, ui ) {
//                      $( "#project_name" ).val( ui.item.value );
//                      return false;
//                    },
//                    select: function( event, ui ) {
//                      $( "#project-name" ).val( ui.item.value );
//                      $( "#project-id" ).val( ui.item.key );
//
//                      return false;
//                    } 
//                        });

//      var availableTags = [
//  {key: "1",value: "Mukund"},{key: "2",value: "Nandu"},{key: "3",value: "Dimble"},{key: "4",value: "Alisha"},{key: "5",value: "Parvathy"}
//   ];


  });
    </script>
<form action="search" method="post" >
<input id="project_name" name="project2" id="searchbox"/>
<input  type="text" id="project-id" />
</form>

请帮我解决这个问题

我的PHP代码

$usr = $_POST['term'];
$cl = $_POST['cl'];
//$usr = 'm';
$output = '';  
$usr = strtolower($usr);
//$retVar = array();
   $db_handle = new DBController();

    $query = "select task_summary_id as 'key',task_header_id as 'value' from gb_task_summary where LCASE(task_header_id) like '$usr%' and task_header_client_id = $cl";

    //echo $query;
    $i=0;
  //  $output = '<ul class="list-unstyled" id ="listUl">';
    $results = $db_handle->runQuery($query);
        if(!empty($results))
        {
            $retVar=$results;
        }
        else
        {
            $retVar = 'N';
        }
//        foreach ($retVar as $key => $value) {
//           $output .= '<li id ="listLI">'.$value["task_header_id"].'</li>';
//           $output .='<ul  id ="listUl">';
//           $output .= '<dd class="unselectable" id ="listDD">'.$value["task_header_name"].'</dd>';
//           $output .='</ul>';
//    
//        }
//        
//        $output .= '</ul>';  
      echo json_encode($retVar);

我的json对＆＃39; 1111＆＃39;

的回应 
[{"key":"499","value":"1111"},{"key":"500","value":"1134"},{"key":"501","value":"1195"},{"key":"502","value":"1211"},{"key":"503","value":"1197"},{"key":"504","value":"1085"},{"key":"505","value":"1193"},{"key":"506","value":"1090"},{"key":"507","value":"1076"},{"key":"508","value":"1196"},{"key":"543","value":"1471"},{"key":"544","value":"1472"},{"key":"566","value":"1111"},{"key":"569","value":"1111"},{"key":"570","value":"1111"},{"key":"571","value":"1111"},{"key":"577","value":"1111"},{"key":"584","value":"1475"},{"key":"585","value":"1454"},{"key":"586","value":"1476"},{"key":"587","value":"1705"},{"key":"588","value":"1541"},{"key":"589","value":"1707"},{"key":"590","value":"1722"},{"key":"591","value":"1721"},{"key":"592","value":"1720"},{"key":"593","value":"1719"},{"key":"594","value":"1718"},{"key":"595","value":"1717"},{"key":"596","value":"1711"},{"key":"597","value":"1710"},{"key":"598","value":"1709"},{"key":"599","value":"1701"},{"key":"600","value":"1704"},{"key":"601","value":"1751"},{"key":"602","value":"1746"},{"key":"603","value":"1784"},{"key":"604","value":"1736"},{"key":"622","value":"1755"},{"key":"623","value":"1769"},{"key":"624","value":"1796"},{"key":"625","value":"1797"},{"key":"626","value":"1803"},{"key":"647","value":"1789"},{"key":"648","value":"1811"},{"key":"649","value":"1813"},{"key":"650","value":"1820"},{"key":"651","value":"1825"},{"key":"652","value":"1828"},{"key":"658","value":"1836"},{"key":"659","value":"1839"},{"key":"660","value":"1847"},{"key":"661","value":"1706"},{"key":"673","value":"1869"},{"key":"674","value":"1872"},{"key":"686","value":"1899"},{"key":"687","value":"1901"},{"key":"691","value":"1907"},{"key":"692","value":"1908"},{"key":"693","value":"1917"},{"key":"701","value":"1803"},{"key":"702","value":"1807"},{"key":"703","value":"1879"},{"key":"704","value":"1880"},{"key":"705","value":"1881"},{"key":"706","value":"1810"},{"key":"707","value":"1858"},{"key":"708","value":"1902"},{"key":"709","value":"1918"},{"key":"710","value":"1893"},{"key":"730","value":"1952"},{"key":"734","value":"1954"},{"key":"735","value":"1958"},{"key":"736","value":"1954"},{"key":"737","value":"1959"},{"key":"746","value":"1958"},{"key":"749","value":"1990"},{"key":"750","value":"1993"},{"key":"751","value":"1997"},{"key":"754","value":"1976"},{"key":"776","value":"1998"},{"key":"785","value":"1948"},{"key":"894","value":"1705"},{"key":"1008","value":"1111"},{"key":"1031","value":"1976"},{"key":"1375","value":"1111"},{"key":"1556","value":"1976"},{"key":"1819","value":"1624"},{"key":"1838","value":"1111"}]

0 个答案:

没有答案
相关问题
最新问题