<Select> widget con dropdown infinito di scorrimento

Nella mia pagina ho circa 20 widget html di selezione comuni. Ad esempio:<Select> widget con dropdown infinito di scorrimento

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

che ha 3000 o più elementi in ciascuno. Quindi ho deciso di convertirli in selezioni Ajax per caricare gli oggetti dinamicamente durante lo scorrimento.

Come posso fare questo ??

fonte

2015-08-07 Arti

Cosa hai provato finora? Sei stato in grado ad esempio di recuperare tutti i valori da ajax? Da dove provengono i dati nella selezione? La domanda è troppo ampia in questo modo per ottenere una risposta adeguata. Tra l'altro anche con una taglia ... non troverai nessuno su SO che ti scriva il codice! –

ho provato tutti i plugin in jquery, ma non supportano lo scrolling infinito per le selezioni comuni (select2 per esempio supporta solo quando si usa per il completamento automatico). La soluzione migliore che ho trovato è: http://www.usamimi.info/~sutara/ajax-combobox/ Ma non riuscivo a convertire l'impaginazione nello scorrimento .... – Arti

Puoi anche provare il plugin jquery select2. https://select2.github.io/ Dove l'utente può cercare i dati con ajax. – Shail

Ho fornito un set di esempio di lavoro di combo-box utilizzando jQuery UI selectmenu. Ho usato il sorgente JSON di base per una richiesta Ajax, per favore lavoraci da solo su questa parte.

$(".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>

fonte

2015-08-19 11:30:18

Questo può essere realizzato con semplici JQuery. Non c'è bisogno di qualsiasi altro plug-in

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>

fonte

2015-08-19 12:57:03 vijayP

<Select> widget con dropdown infinito di scorrimento

risposta

Problemi correlati