Widget <Select> z nieskończonym liście rozwijanym

Na mojej stronie mam około 20 popularnych widżetów html select. Na przykład:Widget <Select> z nieskończonym liście rozwijanym

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

, które mają 3000 lub więcej elementów w każdym z nich. Więc zdecydowałem się przekonwertować je do wyboru ajax, aby ładować elementy dynamicznie podczas przewijania.

Jak mogę to zrobić?

Źródło

2015-08-07 Arti

Co pan próbował do tej pory? Czy byłeś w stanie na przykład pobrać wszystkie wartości z ajax? Skąd pochodzą dane w selekcji? Pytanie jest zbyt szerokie, aby uzyskać właściwą odpowiedź. BTW nawet z nagrodą ... nie znajdziesz nikogo na SO, który napisze kod dla ciebie! –

próbowałem wszystkich wtyczek w jquery, ale nie obsługują one nieskończonego przewijania w przypadku zwykłych wyborów (select2 na przykład wsparcie tylko w przypadku autouzupełniania). Najlepsze rozwiązanie, które znalazłem, to: http://www.usamimi.info/~sutara/ajax-combobox/ Ale nie mogę przekonwertować stronicowania na przewijanie ... – Arti

Możesz także wypróbować wtyczkę select jQuery. https://select2.github.io/ Gdzie użytkownik może wyszukiwać dane za pomocą ajax. – Shail

Podałem zestaw działającego przykładu z listą kombinowaną przy użyciu jQuery UI selectmenu. Użyłem podstawowego źródła JSON dla zapytania ajax, proszę samemu pracować nad tą częścią.

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

Źródło

2015-08-19 11:30:18

Można to osiągnąć w prosty jQuery. Nie ma potrzeby jakiegokolwiek innego pluginu

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>

Źródło

2015-08-19 12:57:03 vijayP

Widget <Select> z nieskończonym liście rozwijanym

Odpowiedz

Powiązane problemy