2012-07-11 31 views
27

Va bene, mi sto tormentando (questo è terribile) ma ho provato a leggere tutto quello che posso e ancora non riesco a farlo funzionare.jQuery UI completamento automatico con JSON

cercando di fare completamento automatico con jQuery UI

mia JSON assomiglia a questo

{"dealers": 
    { 
     "1156":"dealer 1", 
     "1122":"dealer 2", 
     "1176":"dealer 3", 
     "1491":"dealer 4", 
     "1463":"dealer 5", 
     "269":"dealer 6" 
    } 
} 

sto cercando di utilizzare queste informazioni come la fonte per il completamento automatico. Sto ottenendo l'oggetto risposta bene Sto solo avendo problemi nel trovarlo nel giusto formato in modo da poter posizionare il "###" in un campo nascosto legato al "valore" che deve essere visualizzato come la parte del cadere in picchiata.

state cercando un milione di modi diversi, ma un tentativo di recente è stato al di sotto

function ajaxCall() { 
    $.getJSON("/example/location/example.json?term=" + $('#dealerName').val(), 
     function(data) { 
     $.each(data.dealers, function(k, v) {     
       alert(k + ' : ' + v); 
     }); 
    });   
} 

$('#dealerName').autocomplete({ 
    source: ajaxCall, 
    minLength: 2, 
    delay: 100 
}); 

favore e grazie mille!

+0

'k' dovrebbe contenere il nome della chiave che, che è ciò che si desidera. Cosa non funziona esattamente con il tuo codice corrente? L'avviso – Bojangles

+0

sta tornando indefinito –

+2

Fai un 'console.log (dati)' per vedere cosa contiene effettivamente 'data'. Se è vuoto, è probabile che tu abbia un problema con lo script sul tuo server. – Bojangles

risposta

56

È necessario trasformare l'oggetto che si sta tornando in una matrice nel formato previsto da jQueryUI.

È possibile utilizzare $.map per trasformare l'oggetto dealers in tale array.

$('#dealerName').autocomplete({ 
    source: function (request, response) { 
     $.getJSON("/example/location/example.json?term=" + request.term, function (data) { 
      response($.map(data.dealers, function (value, key) { 
       return { 
        label: value, 
        value: key 
       }; 
      })); 
     }); 
    }, 
    minLength: 2, 
    delay: 100 
}); 

Si noti che quando si seleziona un elemento, il "tasto" verrà inserito nella casella di testo. È possibile modificare ciò modificando le proprietà label e value che restituiscono la funzione di richiamata di $.map.

In alternativa, se si ha accesso al codice lato server che sta generando il JSON, è possibile modificare il modo in cui i dati vengono restituiti. Fino a quando i dati:

  • è un array di oggetti che dispongono di una proprietà label, una proprietà value, o entrambi, o
  • è un semplice array di stringhe

In altre parole, se è possibile formattare i dati come questo:

[{ value: "1463", label: "dealer 5"}, { value: "269", label: "dealer 6" }] 

o questo:

["dealer 5", "dealer 6"] 

Allora la tua JavaScript diventa molto più semplice:

$('#dealerName').autocomplete({ 
    source: "/example/location/example.json" 
}); 
+0

grazie mille, sto facendo in modo che il backend aggiusti l'output in modo che sia un array di oggetti –

+2

Dovrebbe cambiare "src" in "data" –

+0

@ThangNguyen: Grazie - risolto. –

1

ho capito che il suo stato già risposto. ma spero che questo aiuti qualcuno in futuro e risparmia così tanto tempo e dolore.

codice completo è qui sotto: Questo è stato fatto per una casella di testo per renderlo Completamento automatico in CiviCRM. Speranza che aiuta qualcuno

CRM.$('input[id^=custom_78]').autocomplete({ 
      autoFill: true, 
      select: function (event, ui) { 
        var label = ui.item.label; 
        var value = ui.item.value; 
        // Update subject field to add book year and book product 
        var book_year_value = CRM.$('select[id^=custom_77] option:selected').text().replace('Book Year ',''); 
        //book_year_value.replace('Book Year ',''); 
        var subject_value = book_year_value + '/' + ui.item.label; 
        CRM.$('#subject').val(subject_value); 
        CRM.$('input[name=product_select_id]').val(ui.item.value); 
        CRM.$('input[id^=custom_78]').val(ui.item.label); 
        return false; 
      }, 
      source: function(request, response) { 
       CRM.$.ajax({ 
        url: productUrl, 
         data: { 
             'subCategory' : cj('select[id^=custom_77]').val(), 
             's': request.term, 
            }, 
        beforeSend: function(xhr) { 
         xhr.overrideMimeType("text/plain; charset=x-user-defined"); 
        }, 

        success: function(result){ 
           result = jQuery.parseJSON(result); 
           //console.log(result); 
           response(CRM.$.map(result, function (val,key) { 
                 //console.log(key); 
                 //console.log(val); 
                 return { 
                   label: val, 
                   value: key 
                 }; 
               })); 
        } 
       }) 
       .done(function(data) { 
        if (console && console.log) { 
        // console.log("Sample of dataas:", data.slice(0, 100)); 
        } 
       }); 
      } 
    }); 

codice PHP su come sto tornando dati a questa chiamata ajax jquery nel completamento automatico:

/** 
* This class contains all product related functions that are called using AJAX (jQuery) 
*/ 
class CRM_Civicrmactivitiesproductlink_Page_AJAX { 
    static function getProductList() { 
     $name = CRM_Utils_Array::value('s', $_GET); 
    $name = CRM_Utils_Type::escape($name, 'String'); 
    $limit = '10'; 

     $strSearch = "description LIKE '%$name%'"; 

     $subCategory = CRM_Utils_Array::value('subCategory', $_GET); 
    $subCategory = CRM_Utils_Type::escape($subCategory, 'String'); 

     if (!empty($subCategory)) 
     { 
       $strSearch .= " AND sub_category = ".$subCategory; 
     } 

     $query = "SELECT id , description as data FROM abc_books WHERE $strSearch"; 
     $resultArray = array(); 
     $dao = CRM_Core_DAO::executeQuery($query); 
     while ($dao->fetch()) { 
      $resultArray[$dao->id] = $dao->data;//creating the array to send id as key and data as value 
     } 
     echo json_encode($resultArray); 
    CRM_Utils_System::civiExit(); 
    } 
} 
+0

Utilizza le istruzioni sql prepare se non vuoi essere hackerato. –

0

Io uso questo script per il completamento automatico ...

$('#custmoers_name').autocomplete({ 
    source: function (request, response) { 

     // $.getJSON("<?php echo base_url('index.php/Json_cr_operation/autosearch_custmoers');?>", function (data) { 
      $.getJSON("Json_cr_operation/autosearch_custmoers?term=" + request.term, function (data) { 
      console.log(data); 
      response($.map(data, function (value, key) { 
       console.log(value); 
       return { 
        label: value.label, 
        value: value.value 
       }; 
      })); 
     }); 
    }, 
    minLength: 1, 
    delay: 100 
}); 

Il mio ritorno JSON: - [{"label":"Mahesh Arun Wani","value":"1"}] dopo la ricerca m

ma visualizzare in discesa [object object] ...

+0

Per favore, mi dai un suggerimento? –

Problemi correlati