jQuery और बूटस्ट्रैप 2.1

Question

संस्करण 2.1 of Twitter Bootstrap में टाइपहेड विकल्प was added में कॉलबैक फ़ंक्शन पास करने की क्षमता के साथ टाइपहेड का उपयोग करना। हालांकि, मुझे एक jQuery AJAX कॉल के साथ काम करने में मुश्किल हो रही है।

यहां तक ​​कि मेरे पास अब तक है।

एचटीएमएल

<form class="form-horizontal" action=""> 
    <fieldset> 
     <div class="control-group"> 
      <label class="control-label" for="myTypeahead">User</label> 
      <div class="controls"> 
       <input type="text" id="myTypeahead" /> 
      </div> 
     </div> 
    </fieldset> 
</form> 

जावास्क्रिप्ट (jQuery $(document).ready समारोह में सेट)

$("#myTypeahead").typeahead({ 
    source: function (query, process) { 
    $.ajax({ 
     type: "POST", 
     url: ServiceURL + "/FindUsers", 
     data: "{ SearchText: '" + query + "' }", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (r1) { 
     var users = []; 
     if (r1.d.Records) { 
      $(r1.d.Records).each(function (index, val) { 
      users.push(val.User.Name); 
      }); 
      console.log(users); 
      process(users); 
     } 
     } 
    }); 
    } 
}); 

जब मैं test (या Test) Typeahead इनपुट में टाइप करें, कोई Typeahead परिणाम प्रदर्शित किए जाते , लेकिन users वैरिएबल से लॉग इन किया गया डेटा इस तरह दिखता है:

["Test User A", "Test User B", "Test User C", "Test User D", "Test User E", "Test User F"] 

यह क्यों काम नहीं करेगा?

इसके अलावा, संदर्भ के लिए, यहां Typeahead JavaScript for Bootstrap है।

Answer 1

मैंने इसे समझ लिया। HTML फॉर्म (प्रश्न में सूचीबद्ध) को एक मॉडल संवाद में प्रदर्शित किया गया था, और टाइपहेड परिणाम div मोडल संवाद के पीछे दिखाई दे रहा था।

यह पता चला कि परिणाम लौटाए जा रहे थे और प्रदर्शित हुए थे, लेकिन टाइपहेड परिणाम कंटेनर बस दिखाई नहीं दे रहा था।

इसे ठीक करने के लिए, मैं इस सीएसएस कहा:

.typeahead { 
    z-index: 1100; 
} 

Answer 2

z- सूचकांक बूटस्ट्रैप के संस्करण 2.3.1 में काम करता है, लेकिन Typeahead मेनू अभी भी काट मिल पाने अगर वे की सीमाओं से बाहर भी किसी भी दिशा में संवाद।

एक फिक्स के रूप में, के बाद लोड हो रहा है bootstrap.css इस सीएसएस जोड़ें:

/* Fix for Bootstrap dialog typeahead cut-off */ 
.modal-body { 
    overflow: visible; 
} 

Answer 3

$('#activity').typeahead({ 
         itemSelected:function(data,value,text){ 
          console.log(data) 
          alert('value is'+value); 
          alert('text is'+text); 
         },              
         ajax: { 
          url: "/path/to/destination", 
          timeout: 500, 
          displayField: "activity", 
          triggerLength: 2, 
          method: "get", 
          loadingClass: "loading-circle", 
          preDispatch: function (query) { 
           //showLoadingMask(true); 
           return { 
            search: query 
           } 
          }, 
          preProcess: function (data) { 
           //showLoadingMask(false); 
           if (data.success === false) { 
            // Hide the list, there was some error 
            return false; 
           } 
           // We good!    
           return data.mylist; 
          } 
         } 
}); 

आप कोड के ऊपर का उपयोग typehead काम पाने के लिए कर सकते हैं। सुनिश्चित करें कि आप JSON डेटा को निम्न प्रारूप डेटा में वापस कर रहे हैं। Mylist उपरोक्त कोड के साथ काम करने के लिए वहां होना चाहिए।