2010-08-11 13 views
9

पर कोई परिणाम संदेश नहीं दिखा रहा है मैं jQuery autocomplete plugin का उपयोग कर रहा हूं, यूआई स्वत: पूर्ण नहीं। मैं अनक्लिक करने योग्य बनाना चाहता हूं जब भी वे कुछ ऐसा दर्ज करते हैं जिसमें स्वत: पूर्ण से कोई परिणाम नहीं होता है तो कोई परिणाम संदेश दिखाई नहीं देता है। मैं उसे कैसे कर सकता हूँ?jquery autocomplete

+3

तो यदि कोई परिणाम नहीं है, तो आप इसे छोड़ना चाहते हैं और एक "परिणाम" दिखा सकते हैं, जो "कोई नतीजा नहीं है" - और यह अनजान है? –

+0

हां, बिल्कुल सही – babonk

उत्तर

5

यहां एक समाधान है जिसके लिए jquery.autocomplete.js में कुछ छोटे संपादन की आवश्यकता है।

jquery.autocomplete.js में:

यह कहता है कि emptyData() पहली बात

function hideResultsNow() { 

    $('#emptyData').show(); 
    ... 
} 

बदलें इनपुट क्षेत्र के बाद #emptyData को छिपाने के लिए पर कुंजी दबाने बाँध के लिए संपादित समारोह hideResultsNow() प्रत्येक कुंजी दबाने

$input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) { 

    $('#emptyData').hide(); 
    ... 
} 

छिपाएं एक सफल चयन (दाएं से पहले यह सच रिटर्न) के बाद #emptyData

function selectCurrent() { 

    ... 
    $('#emptyData').hide(); 
    return true; 
} 

फिर आपको इनपुट बॉक्स के नीचे #emptyData नामक एक ही स्टाइल सूची के साथ एक div जोड़ने की आवश्यकता है। मेरे द्वारा उपयोग किए जाने वाले परीक्षण पृष्ठ के लिए यहां पूर्ण HTML है।

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" /> 
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" /> 

    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script> 
    <script type="text/javascript" src="jquery.autocomplete.js"></script> 
    <script> 
    $(document).ready(function(){ 
    var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" "); 
    $("#example").autocomplete(data); 

    }); 
    </script> 

</head> 
<body> 
    API Reference: <input id="example" /> (try "C" or "E") 


    <div id='emptyData' class='ac_results' style='display: none; position: absolute; width: 151px; top: 20px; left: 91px;'> 
    <ul style="max-height: 180px; overflow: auto;"> 
     <li id='noDataMsg' >No Results</li> 
    </ul> 
    </div> 

</body> 
</html> 

#emptyData की स्थिति यह है कि तुलना में स्वत: पूर्ण स्थिति से लिया गया है, और सीएसएस शैली सही उत्तरों के लिए के रूप में काफी समान नहीं है, लेकिन अन्य मुझे नहीं लगता कि वहाँ कुछ भी है कि परिवर्तन की आवश्यकता होगी होना चाहिए । उम्मीद है कि आपकी समस्या हल करता है।

+0

+1 था तो मैं ऐसा कर सकता था यह एक बहुत अच्छा समाधान है! –

+0

धन्यवाद, यह मेरे लिए काम किया। मेरे उपयोग के लिए मैंने जो बदलाव किए हैं, उनमें से जोड़े: 1) इसे दिखाने के लिए मजबूर नहीं किया गया है() जब कुछ भी दर्ज नहीं किया गया था 2) पृष्ठ पर एकाधिक स्वत: पूर्णता के साथ, आपको सही लोगों के साथ काम करने के लिए कुछ ifs जोड़ने की आवश्यकता है। पूरी तरह से जवाब के लिए धन्यवाद! – babonk

+0

@babonk: आपने यह दिखाने के लिए कैसे मजबूर किया कि कुछ भी दर्ज नहीं किया गया था, और किसी प्रविष्टि से पहले संभवतः? – InnateDev

0

यहां 1/2 समाधान है; क्या आपके AJAX कॉल स्ट्रिंग को "नो परिणाम" लौटाते हैं जब इसका कोई परिणाम नहीं होता है।

एकल परिणाम बनाने के लिए क्लिक करने योग्य संभवतः प्लगइन के स्रोत को देखने की आवश्यकता नहीं है।

+0

मैं ऐसे समाधान को स्वीकार करने के लिए तैयार हूं जो PHP या जेएस से कोई परिणाम नहीं भेजता है, इससे कोई फर्क नहीं पड़ता। – babonk

+0

@babonk: क्या आपने अपने PHP में कोई परिणाम लागू नहीं किया है? – Hogan

+0

वर्तमान में नहीं, लेकिन अगर कोई समाधान – babonk

1

मुझे लगता है कि स्वतः पूर्ण करने के बजाय स्वत: पूर्ण करने के बजाय आप स्वयं को ऐसा कर सकते हैं, फिर परिणामों को स्वत: पूर्ण करने के लिए, सर्वर से आने वाले परिणामों के लिए उन दोनों के बीच एक साधारण फ़िल्टर के साथ पास करें।

var input = $('input.autocomplete'); 
var inputLimit = 10; 

// Create warning message and hide it 
var warning = $('<p></p>').insertAfter(input).text('No results').addClass('warning').hide(); 

input.keyup(function(){ 
    warning.hide(); 

    $.get('url.php', {q: this.value, limit: inputLimit}, function(data){ 
     if(data){ 
      input.autocomplete(data); 
     } else { 
      warning.show(); 
     } 
    } 
}); 

बेशक चेतावनी स्वत: पूर्ण क्षेत्र के भीतर ही प्रकट नहीं होता है, लेकिन यह सबसे अच्छा समाधान मैं प्लगइन स्रोत को संशोधित किए बिना के बारे में सोच सकते हैं।

संबंधित मुद्दे