简体   繁体   English

实时搜索获得多个字段

[英]Live Search get multiple fields

I have this live search and it works perfectly. 我有这个实时搜索,并且效果很好。 What i want to do is I want to get another field. 我想做的是我想获得另一个领域。 Aside of fetching indcator name i also want to get its ID by assigning it to another input type once I clicked the indicatorname using live search. 除了获取感应器名称外,我还想通过使用实时搜索单击指标名称,将其分配给另一种输入类型来获取其ID。

Heres the Script : 脚本:

  <script type="text/javascript">
       $(document).ready(function() {
       $('#indicatorname').autocomplete({
           source: function( request, response ) {
           $.ajax({
             url : 'ajax.php',
             dataType: "json",
        data: {
           name_startsWith: request.term,
           type: 'indicatorname'
        },
         success: function( data ) {

           response( $.map( data, function( item ) {
            return {
              label: item,
              value: item
            }
          }));  


         }
          });
        },
        autoFocus: true,
        selectFirst: true,
        minLength: 0,
        focus : function( event, ui ) {
         $('#indicatorname').html(ui.item.value);
        },
        select: function( event, ui ) {
         $('#indicatorname').html(ui.item.value);
        },
        open: function() {
         $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top");
        },
        close: function() {
          $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        }           
         });

     $('#slider').rhinoslider({
        effect: 'transfer'
      });
        });
   </script>

Heres the ajax.php : 继承人ajax.php:

  <?php

   $connection = pg_connect("host=localhost dbname=brgy_profiler
                 user=postgres password=password");

    if (!$connection)
         {  
          echo "Couldn't make a connection!";
         }

  ?>

<?php

    if($_GET['type'] == 'indicatorname'){
     $result = pg_query("SELECT cindicatordesc,nindicatorid from
                          tbl_indicators where cindicatordesc LIKE
                          '%".$_GET['name_startsWith']."%'");   
     $data = array();
    while ($row = pg_fetch_array($result)) 
       {
         array_push($data, $row['cindicatordesc']);
       }    

        echo json_encode($data);
     }

  ?>

Here's my tbl_indicator : 这是我的tbl_indicator:

在此处输入图片说明

How can i get also the nindicatorid field and get it together with cindicatordesc using ajax live search? 如何使用ajax实时搜索获取nindicatorid字段并将其与cindicatordesc一起使用?

Note: Only cindicatordesc will be displayed and nindicatorid will be save in an input type. 注意:仅显示cindicatordesc,nindicatorid将保存为输入类型。

Not a problem. 没问题 You can add additional data attributes in your Auto-complete select return as, 您可以在“自动完成select返回”中添加其他数据属性,

 $('#indicatorname').autocomplete({   
         source: function( request, response ) {
         ...........
         success: function( data ) {
           response( $.map( data, function( itemList ) {
            return {
              label: itemList.label,
              value: itemList.value,
              extraField : itemList.extraField
                }
          }));

So, Only change you need to accommodate is the Server side where you need to send the extra values to the Auto-complete AJAX. 因此,您只需要在服务器端进行更改就可以将额外的值发送到自动完成AJAX。

And , On select event you can fetch the value as ui.item.extraField . 并且,在select事件中,您可以获取ui.item.extraField的值。

Here is a Sample Demo of using multiple attributes. 这是使用多个属性的示例演示 Although it is not same as you have done, the inner logic is the same. 尽管与您所做的不一样,但内部逻辑是相同的。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM