我有带有过滤器按钮的jquery价格过滤器，但是现在我想通过使用onchange函数过滤没有按钮的数据。我已经在codeigniter中实现了这个jquery滑块，但是它不能与onchange函数一起使用。
这是我的查看页面：
<form action="" method="post">
<h4 class="pb-1"><span>Price Range</span></h4>
<!--Range slider -->
<div class="col-md-12">
<div class="col-md-6">
<span style="font-weight:bold;font-size:12px;"> Min </span>
<input type="text" id="value-min" name="min_price" required="" / style="width:56%">
</div>
<div class="col-md-6">
<span style="font-weight:bold;font-size:12px;">Max </span>
<input type="text" id="value-max" name="max_price" required="" / style="width:56%">
</div>
Here in this div i want add onchange function:
<div id="pmd-slider-value-range" class="pmd-range-slider" min="<?= $deals_min_max_prices->min_price ?>" max="<?= $deals_min_max_prices->max_price ?>" onChange="this.form.submit();"></div> <br/>
<div class="text-center" style="margin-top:-18px !important;margin-bottom: 10px!important;">
<button type="submit" class="btn btn-success btn-sm">Filter</button>
</div>
</form>
这是滑块的jquery代码：
var pmdSliderValueRange = document.getElementById('pmd-slider-value-range');
noUiSlider.create(pmdSliderValueRange, {
start: [<?= $deals_min_max_prices->current_min_price ?>, <?= $deals_min_max_prices->current_max_price ?>], // Handle start position
connect: true, // Display a colored bar between the handles
tooltips: [wNumb({decimals: 0}), wNumb({decimals: 0})],
format: wNumb({
decimals: 0,
thousand: '',
postfix: '',
}),
range: {// Slider can select '0' to '100'
'min': <?= $deals_min_max_prices->min_price ?>,
'max': <?= $deals_min_max_prices->max_price ?>
},
step: 5,
pips: {
mode: 'steps',
density: 10
}
});
var valueMax = document.getElementById('value-max'),
valueMin = document.getElementById('value-min');
当滑块值更改时，更新输入和跨度
pmdSliderValueRange.noUiSlider.on('update', function (values, handle) {
if (handle) {
valueMax.value = values[handle];
} else {
valueMin.value = values[handle];
}
});
这是我的控制者：
$this->data['deals_min_max_prices'] = $this->deals_model->get_deals_min_max_prices($min_max_filters);
$this->data['deals_min_max_prices']->current_min_price = $this->data['deals_min_max_prices']->min_price;
$this->data['deals_min_max_prices']->current_max_price = $this->data['deals_min_max_prices']->max_price;
if ($this->input->get_post('min_price')) {
$this->data['deals_min_max_prices']->current_min_price = $this->input->get_post('min_price');
}
if ($this->input->get_post('max_price')) {
$this->data['deals_min_max_prices']->current_max_price = $this->input->get_post('max_price');
}
这是模型：
function get_deals_min_max_prices($filters = []) {
$this->db->select('min(deals.deal_price) as min_price,max(deals.deal_price) as max_price');
$this->db->from('deals');
$this->db->join('categories', 'categories.id=deals.categories_id');
$this->db->join('sub_categories', 'sub_categories.id=deals.sub_categories_id');
$this->db->join('stores', 'stores.id=deals.stores_id');
$this->db->where("deals.status", 1);
foreach ($filters as $key => $value) {
if (is_array($value)) {
if ($key == 'deals.tags') {
$cond = array();
foreach ($value as $key => $val) {
$cond[] = 'FIND_IN_SET("' . $val . '",deals.tags) != 0';
}
$this->db->where('(' . implode(' OR ', $cond) . ')');
} else {
$key_array = explode(' ', $key);
if (isset($key_array[1]) && ($key_array[1] == "!=")) {
$this->db->where_not_in($key_array[0], $value);
} else {
$this->db->where_in($key, $value);
}
}
} elseif ($key == 'deals.deal_title') {
$this->db->like($key, $value);
} elseif ($key == 'deals.tags') {
$this->db->where('FIND_IN_SET("' . $value . '",deals.tags) !=', 0);
} else {
$this->db->where($key, $value);
}
}
$data = $this->db->get()->row();
if ($data) {
return $data;
}
return (object) array('min_price' => 0, 'max_price' => 100);
}