जेसीआई यूआई स्वत: पूर्ण जेसन और AJAX

Question

मैंने जेएसओएन के माध्यम से लेबल और मूल्य गुणों के साथ एक सरणी पास करने से निपटने के बहुत सारे प्रश्न देखे हैं, लेकिन तारों को पार करने के बारे में बहुत कुछ नहीं है। मेरी समस्या यह है कि मुझे भरने के लिए मेरा स्वत: पूर्ण नहीं लगता है। मैं एक डंप समारोह भाग गया और स्वत: पूर्ण करने के लिए JSON के माध्यम से पारित कर दिया इन नमूना मान हो रही है:

$("#auto_id").autocomplete({ 
    source: function(request,response) { 

     $.ajax ({ 
      url: "fill_id.php", 
      data: {term: request.term}, 
      dataType: "json", 
      success: function(data) { 
      //what goes here? 
       } 
    }) } 
    }); 

यहाँ है fill_id.php:

0: 23456 
1: 21111 
2: 25698 

यहाँ कुछ कोड है

$param = $_GET['term']; 
$options = array(); 


$db = new SQLite3('database/main.db'); 
    $results = $db->query("SELECT distinct(turninId) FROM main WHERE turninid LIKE '".$param."%'"); 


while ($row_id = $results->fetchArray()) { 
     $options[] = $row_id['turninId']; 
    } 
echo json_encode($options); 

मेरे स्वत: पूर्ण खाली रहता है। इसे भरने के लिए मैं अपना JSON सरणी कैसे बदलूं? या मैं अपने AJAX सफलता समारोह में क्या शामिल करूं?

Answer 1

आप jQuery यूआई के स्वत: पूर्ण के दूरदराज के डेमो के लिए बहुत ज्यादा छड़ी कर सकते हैं: http://jqueryui.com/resources/demos/autocomplete/remote-jsonp.html

स्वत: -पूर्ण सूची में अपने परिणाम प्राप्त करने के लिए, आप एक लेबल और (प्रतिक्रिया पैरामीटर के लिए एक मूल्य के साथ एक वस्तु डाल करने की आवश्यकता है जो वास्तव में एक समारोह) अपने ajax सफलता समारोह के अंदर है:

source: function(request, response) { 
    $.ajax({ 
     url: "fill_id.php", 
     data: {term: request.term}, 
     dataType: "json", 
     success: function(data) { 
      response($.map(data.myData, function(item) { 
       return { 
        label: item.title, 
        value: item.turninId 
       } 
      })); 
     } 
    }); 
} 

लेकिन यह केवल आप yor थोड़ा fill_id.php को संशोधित करता है, तो काम करेगा:

// escape your parameters to prevent sql injection 
$param = mysql_real_escape_string($_GET['term']); 
$options = array(); 

// fetch a title for a better user experience maybe.. 
$db = new SQLite3('database/main.db'); 
    $results = $db->query("SELECT distinct(turninId), title FROM main WHERE turninid LIKE '".$param."%'"); 

while ($row_id = $results->fetchArray()) { 
    // more structure in data allows an easier processing 
    $options['myData'][] = array(
     'turninId' => $row_id['turninId'], 
     'title' => $row_id['title'] 
    ); 
} 

// modify your http header to json, to help browsers to naturally handle your response with 
header('Cache-Control: no-cache, must-revalidate'); 
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); 
header('Content-type: application/json'); 

echo json_encode($options); 

बेशक, जब आपके टेबल में कोई शीर्षक या कुछ भी नहीं है, तो आप अपनी प्रतिक्रिया को छोड़कर अपनी प्रतिक्रिया को छोड़ सकते हैं और आईडी को अपनी सफलता कॉलबैक में दोहरा सकते हैं। महत्वपूर्ण है कि आप एक मूल्य/आइटम जोड़ी के साथ स्वत: पूर्ण में अपने response समारोह को भरने है,:

// this will probably work without modifying your php file at all: 
response($.map(data, function(item) { 
    return { 
     label: item, 
     value: item 
    } 
})); 

संपादित करें: नई jQuery यूआई का स्वत: पूर्ण ui के संदर्भ में लिंक को अपडेट करने