15 октября 2019
Нет комментариев
Когда нужно совместить Chosen (https://harvesthq.github.io/chosen/) и Autocomplete Widget (https://api.jqueryui.com/autocomplete/), например, при очень большом списке.
$("select.chosen").chosen({width:"100%"}); $('.accessories .search-field input').each(function(i,el){ el=$(el); el.autocomplete({ minLength:3, delay:2000, source:function(request,response){ var select=el.closest('.accessories').find('select'); $.ajax({ url:"/?sc="+request.term, dataType:"json", success:function(data){ select.find('option').not(':selected').remove(); response($.map(data,function(item){ if(!(select.find('option[value='+item.id+']').length>0)){ select.append('<option value="'+item.id+'">'+item.name+' ['+item.part+']</option>'); } })); select.trigger("chosen:updated"); } }); }, }); });
Пример php для ajax:
if(isset($_GET['sc'])){ header("Content-Type: application/json"); $result=get_from_base('`id`,`part`,`name`','catalog',"`part` LIKE '%".$_GET['sc']."%'",'`parent`,`pos`'); echo json_encode($result); exit(); }
Сам select:
<div class="accessories"> <select name="accessories[]" multiple="multiple" class="chosen" data-placeholder="Выбрать позиции"> <?if(count($catalog_accessories)>0){?> <?foreach($catalog_accessories as $v){?> <option value="<?=$v['id']?>"<?if(in_array($v['id'],$change_catalog_accessories)){?> selected="selected"<?}?>><?=$v['name']?> [<?=$v['part']?>]</option> <?}?> <?}?> </select> </div>
Другие данные:
$change_catalog_accessories=array(); $change_catalog=get_by_id($_GET["uid"],'catalog'); if($change_catalog['accessories']!=''){ $change_catalog_accessories=explode(',',str_replace("'","",$change_catalog['accessories'])); $catalog_accessories=get_from_base('`id`,`name`,`part`','catalog',"`shown`=1 and `id`!='".$change_catalog['id']."' and `id` in (".$change_catalog['accessories'].")",'`parent`,`pos`'); }