<Select> विजेट असीमित स्क्रॉल ड्रॉपडाउन

मेरे पृष्ठ पर मेरे पास लगभग 20 सामान्य HTML चुनिंदा विजेट हैं। उदाहरण के लिए:<Select> विजेट असीमित स्क्रॉल ड्रॉपडाउन

<select> 
    <option>1</option> 
    ... 
    <option>3000</option> 
</select>

जिसमें प्रत्येक में 3000 या अधिक तत्व हैं। तो मैंने स्क्रॉल करते समय गतिशील रूप से आइटम लोड करने के लिए उन्हें AJAX चयन में बदलने का निर्णय लिया है।

मैं यह कैसे कर सकता हूं ??

स्रोत

2015-08-07 Arti

क्या आप अब तक की कोशिश की है की कोई जरूरत नहीं है? क्या आप AJAX से सभी मानों को पुनर्प्राप्त करने के लिए उदाहरण के लिए सक्षम हैं? जहां चयन में डेटा आ रहा है? एक उचित उत्तर पाने के लिए सवाल इस तरह से व्यापक है। बीटीडब्ल्यू भी एक बक्षीस के साथ ... आप एसओ पर कोई नहीं पाएंगे जो आपके लिए कोड लिखेंगे! –

मैंने jquery में सभी प्लगइन्स का प्रयास किया है, लेकिन वे सामान्य चयनों के लिए अनंत स्क्रॉलिंग का समर्थन नहीं करते हैं (उदाहरण 2 उदाहरण के लिए केवल तभी समर्थन करें जब आप स्वत: पूर्ण हो)। मुझे मिला सबसे अच्छा समाधान यह है: http://www.usamimi.info/~sutara/ajax-combobox/ लेकिन मैं अंकन को स्क्रॉल करने में परिवर्तित नहीं कर सका .... – Arti

आप jquery select2 प्लगइन भी कोशिश कर सकते हैं। https://select2.github.io/ जहां उपयोगकर्ता AJAX के साथ डेटा खोज सकता है। – Shail

मैंने jQuery UI selectmenu का उपयोग कर कॉम्बो-बॉक्स के कामकाजी उदाहरण का एक सेट प्रदान किया है। मैंने AJAX अनुरोध के लिए मूल JSON स्रोत का उपयोग किया है, कृपया इस भाग पर स्वयं काम करें।

$(".ajax-combo").selectmenu({ 
 
    "width": "100px", 
 
}); 
 
$(".ajax-combo").selectmenu("menuWidget").addClass("make-scrolling"); 
 
$(".ajax-combo").selectmenu("menuWidget").scroll(function(e) { 
 
    if (e.currentTarget.scrollHeight - 10 < e.currentTarget.scrollTop + $(e.currentTarget).height()) { 
 
    var curTar = e.currentTarget; 
 
    var lastTop = curTar.scrollTop; 
 
    $.getJSON("http://echo.jsontest.com/10/test/20/rest/30/best/40/vest/50/fest", function(data) { 
 
     $.each(data, function(key, val) { 
 
     $(".ajax-combo").append("<option value='" + key + "'>" + val + "</option>"); 
 
     }); 
 
     $(".ajax-combo").selectmenu("refresh"); 
 
     curTar.scrollTop = lastTop; 
 
    }); 
 
    } 
 
});

.make-scrolling { 
 
    overflow-y: scroll; 
 
    height: 150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 

 
<select class="ajax-combo"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
</select>

स्रोत

2015-08-19 11:30:18

यह सरल JQuery के साथ प्राप्त किया जा सकता है। किसी भी अन्य प्लगइन

var selectObj = $("#myselectbox"); 
 
var singleoptionheight = selectObj.find("option").height(); 
 
var selectboxheight = selectObj.height(); 
 
var numOfOptionBeforeToLoadNextSet = 2; 
 
var lastScrollTop = 0; 
 
var currentPageNo = 1; 
 
var isAppending = false; 
 
var currentScroll = 0; 
 

 
$(document).ready(function() { 
 
    $(selectObj).scroll(function(event) { 
 
    OnSelectScroll(event); 
 
    }); 
 
}); 
 

 
function OnSelectScroll(event) { 
 
    var st = $(selectObj).scrollTop(); 
 
    var totalheight = selectObj.find("option").length * singleoptionheight; 
 
    if (st > lastScrollTop) { 
 
    // downscroll code 
 
    $("#direction").html("downscroll"); 
 
    currentScroll = st + selectboxheight; 
 
    $("#scrollTop").html(currentScroll); 
 
    $("#totalheight").html(totalheight); 
 

 
    if ((currentScroll + (numOfOptionBeforeToLoadNextSet * singleoptionheight)) >= totalheight) { 
 
     currentPageNo++; 
 
     LoadNextSetOfOptions(currentPageNo); 
 
    } 
 

 
    } else { 
 
    // upscroll code 
 
    $("#direction").html("upscroll"); 
 
    } 
 
    lastScrollTop = st; 
 
} 
 

 

 

 
function LoadNextSetOfOptions(pageNo) { 
 
    //here we can have ajax call to fetch options from server. 
 
    //for demo purpose we will have simple for loop 
 
    //assuming pageNo starts with 1 
 
    var startOption = ((pageNo - 1) * 10) + 1; //for example if pageNo is 2 then startOption = (2-1)*10 + 1 = 11 
 
    var endOption = startOption + 10; //for example if pageNo is 2 then endOption = 11 + 10 = 21 
 

 
    for (i = startOption; i < endOption; i++) { 
 
    $(selectObj).append("<option>" + i + "</option>"); 
 
    } 
 

 
    $(selectObj).scrollTop(currentScroll - (selectboxheight)); 
 

 
}

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
 
</head> 
 

 
<body> 
 
    <p>Infinite scroll for select box</p> 
 
    <select id="myselectbox" size="5"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
    <option>6</option> 
 
    <option>7</option> 
 
    <option>8</option> 
 
    <option>9</option> 
 
    <option>10</option> 
 
    </select> 
 

 
    <p>Direction: <span id="direction"></span> 
 
    </p> 
 

 
    <p>scrollTop: <span id="scrollTop"></span> 
 
    </p> 
 
    <p>totalheight: <span id="totalheight"></span> 
 
    </p> 
 
</body> 
 

 
</html>

स्रोत

2015-08-19 12:57:03 vijayP

<Select> विजेट असीमित स्क्रॉल ड्रॉपडाउन

उत्तर

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