2015-05-08 3 views
8

मैं ट्विटर टाइपहेड और PHP का उपयोग mysql से डेटा प्राप्त करने के लिए बैकएंड के रूप में कर रहा हूं। लेकिन जब मैं टेक्स्ट बॉक्स पर टाइप करना शुरू करता हूं तो मैं कोई सुझाव नहीं देख पा रहा हूं। मुझे लगता है कि क्योंकि php उत्पादन JSON इनकोडिंग हो गया है ..PHP से टाइपहेड तक आउटपुट कैसे प्राप्त करें?

मैं उत्पादन कैसे सांकेतिक शब्दों में बदलना कर सकते हैं

उत्पादन:

echo '<a href="results.html" class="searchres" onclick="navigate()" style="color:#696969;text-decoration:none;"><img src='.$iurl.' class="icons" /><div class="results" style="color:#696969;text-decoration:none;">'."$fname".'</div><span style="color:#696969;text-decoration:none;" class="author">'.$caption.'</span></a>'."\n"; 

एचटीएमएल:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Example of Twitter Typeahead</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script type="text/javascript" src="../js/typeahead.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('input.typeahead').typeahead({ 
     name: 'countries', 
     prefetch: 'getvalues.php', 
     limit: 10 
    }); 
}); 
</script> 
<style type="text/css"> 
.bs-example{ 
    font-family: sans-serif; 
    position: relative; 
    margin: 100px; 
} 
.typeahead, .tt-query, .tt-hint { 
    border: 2px solid #CCCCCC; 
    border-radius: 8px; 
    font-size: 24px; 
    height: 30px; 
    line-height: 30px; 
    outline: medium none; 
    padding: 8px 12px; 
    width: 396px; 
} 
.typeahead { 
    background-color: #FFFFFF; 
} 
.typeahead:focus { 
    border: 2px solid #0097CF; 
} 
.tt-query { 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; 
} 
.tt-hint { 
    color: #999999; 
} 
.tt-dropdown-menu { 
    background-color: #FFFFFF; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    border-radius: 8px; 
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    margin-top: 12px; 
    padding: 8px 0; 
    width: 422px; 
} 
.tt-suggestion { 
    font-size: 24px; 
    line-height: 24px; 
    padding: 3px 20px; 
} 
.tt-suggestion.tt-is-under-cursor { 
    background-color: #0097CF; 
    color: #FFFFFF; 
} 
.tt-suggestion p { 
    margin: 0; 
} 
</style> 
</head> 
<body> 
    <div class="bs-example"> 
     <input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false"> 
    </div> 
</body> 
</html>   

getvalues.php

<?php 
require_once "config.php"; 
$q = strtolower($_GET["q"]); 
if (!$q) return; 

$sql = "select file_name,img_url,captions from completer"; 
$rsd = mysql_query($sql); 
while($rs = mysql_fetch_array($rsd)) { 
    $fname = $rs['file_name']; 
    $iurl = $rs ['img_url']; 
    $caption = $rs ['captions']; 
    echo '<a href="results.html" class="searchres" onclick="navigate()" style="color:#696969;text-decoration:none;"><img src='.$iurl.' class="icons" /><div class="results" style="color:#696969;text-decoration:none;">'."$fname".'</div><span style="color:#696969;text-decoration:none;" class="author">'.$caption.'</span></a>'."\n"; 
} 
?> 
+0

php कोड? –

+0

@AramKocharyan हां –

उत्तर

0

वाई कहां अपनी सूची Typeahead के लिए एक json फ़ाइल में इस पर अपनी स्क्रिप्ट डाल दिया और बदलना चाहते हो सकता है:

$(document).ready(function(){ 
    $('input.typeahead').typeahead({ 
     name: 'countries', 
     prefetch: 'location/getvalues.json', 
     limit: 10 
    }); 
});  

json फ़ाइल होना चाहिए:

["country1","country2","country3"] 
1

सबसे पहले, JSON के रूप में उत्पादन एन्कोड करने के लिए , तो आप ऐसा जैसे परिणामों के साथ एक सरणी का निर्माण और json_encode() उपयोग करने के लिए, है:

$return = array(); 
while($rs = mysql_fetch_array($rsd)) { 
    $result[] = "..."; 
} 
echo json_encode($result); 

लेकिन डिफ़ॉल्ट परिणामों से कर रहे हैं एचटीएमएल से पहले Typeahead में दिखाया गया है, तो आप परिणाम आप उम्मीद कर पाने wan't बच गए, लेकिन सुझाव सूची में एचटीएमएल कोड देखें। कस्टम एचटीएमएल के साथ प्रविष्टियों को डिजाइन करने के लिए आपको here वर्णित टेम्पलेट का उपयोग करना चाहिए।

आपका $result सरणी प्रविष्टियों ऐसा दिखाई दे सकता क्षेत्रों आप अपने HTML में है प्रदान करने के लिए:

$result[] = array(
    "iurl" => "...", 
    "fname" => "...", 
    "caption" => "..." 
); 

... और फिर के रूप में वर्णित टेम्पलेट में भरे जाने।

एक और बात: prefetch विकल्प है, तो आप उपयोग कर रहे हैं Typeahead में से एक नहीं है, लेकिन खोजी कुत्ता, जो आमतौर पर Typeahead के साथ एक साथ प्रयोग किया जाता है, लेकिन पहले से प्रारंभ किए जाने की आवश्यकता है और source रूप Typeahead को दिया जाता है की। here देखें, यह काफी आसान है।

खोजी कुत्ता उस पर हिस्सा तय डेटासेट सरणियों के रूप में तय डेटासेट यूआरएल द्वारा ले जा सकते हैं (local विकल्प के माध्यम से), (prefetch विकल्प के माध्यम से) या जो है आप apperently, क्या करना चाहते हैं क्या के रूप में आप लाने यूआरएल करने के लिए क्वेरी कर सकते हैं, है आपके PHP कोड में $_GET["q"] का मान।

remote: { 
    url: 'getvalues.php?q=%QUERY', 
    wildcard: '%QUERY' 
} 

के रूप में यह द्वारा क्लाइंट की तरफ फिर से फ़िल्टर कर दिया जाएगा तुम, कि क्या करने की जरूरत नहीं है: उस मामले में आप अपने एसक्यूएल में $q का उपयोग करें और remote विकल्प इस तरह के साथ खोजी कुत्ता प्रारंभ करना होगा typeahead.js ... यह केवल प्रदर्शन का एक प्रश्न है और परिणामों की मात्रा है। यदि कुछ ही हैं, तो रक्तचाप prefetch विकल्प का उपयोग करें।

0

सबसे पहले आपको का उपयोग mysql के बजाय करना चाहिए और आप अपनी क्वेरी में $_GET का उपयोग नहीं कर रहे हैं। सुनिश्चित नहीं है कि इसकी आवश्यकता है या नहीं।

अपने कोड के लिए, यह सुनिश्चित न करें कि प्रीफेच का उपयोग कैसे करें। मैं स्वयं रक्तचाप का उपयोग करता हूं जिसका उपयोग आधिकारिक ट्विटर टाइपहेड गिथब पर भी किया जाता है।यह इस तरह दिखता है:

var countries= new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    limit: 100, 
    remote: { 
     'cache': false, 
     url: 'ajax/getvalues.php?q=%QUERY', 
     wildcard: '%QUERY', 
     filter: function (data) { 
      return data; 
     } 
    } 
}); 

countries.initialize(); 

यह ajax कॉल के माध्यम से अपने सर्वर से डेटा प्राप्त होगा। आप अपने एजेक्स कॉल से अपने टाइपहेड पर सभी एचटीएमएल मार्कअप के बिना एक JSON वापस कर देते हैं। html मार्कअप Typeahead

$('.typeahead').typeahead({ 
    highlight: true 
}, { 
    name: 'countries', 
    source: producten.ttAdapter(), 
    displayKey: 'artikelNaam', 
    templates: { 
     suggestion: function (countries) { 
      result='<a href="results.html" class="searchres" onclick="navigate()" style="color:#696969;text-decoration:none;">'+ 
       '<img src='+countries.img_url+' class="icons" />' 
       '<div class="results" style="color:#696969;text-decoration:none;">'+ 
        countries.file_name+ 
       '</div>'+ 
       '<span style="color:#696969;text-decoration:none;" class="author">'+ 
        countries.captions+ 
       '</span>'+ 
      '</a>'; 
      return result; 
     } 
    } 
}); 

में किया जा सकता और अपने php फ़ाइल इस तरह दिखना चाहिए: प्रदान की जाती है `getvalues.php`

<?php 
require_once "config.php"; 
$q = strtolower($_GET["q"]); 
if (!$q) return; 

$sql = "select file_name,img_url,captions from completer"; 
$rsd = mysql_query($sql); //should change to mysqli_query($con,$sql) where $con is your connection in config.php 
while($rs = mysqli_fetch_assoc($rsd)) { 
    $rows[]=$rs; 
} 
print json_encode($rows); 
?> 
संबंधित मुद्दे