使用javascript价格范围下拉菜单更改模糊文本

Question

如果您选择了一个价格，但如果您想在文本框中修改价格，则下拉菜单有效

<input name="min_price" type="text" class="min_input form-control" placeholder="Min Price" onchange="javascript:void(0)"> 

它不会更新。手动输入价格时，如何进行onblur更改？

JSFiddle

function nFormatter(num, digits) {
var si = [
{ value: 1, symbol: "" },
{ value: 1E3, symbol: "k" },
{ value: 1E6, symbol: "M" },
{ value: 1E9, symbol: "G" },
{ value: 1E12, symbol: "T" },
{ value: 1E15, symbol: "P" },
{ value: 1E18, symbol: "E" }
];
var rx = /.0+$|(.[0-9]*[1-9])0+$/;
var i;
for (i = si.length - 1; i > 0; i--) {
if (num >= si[i].value) {
break;
}
}
return (num / si[i].value).toFixed(digits).replace(rx, "$1") + si[i].symbol;
}
$('.dropdown-menu.ddRange')
.click(function(e) {
e.stopPropagation();
});
function disableDropDownRangeOptions(max_values, minValue) {
if (max_values) {
max_values.each(function() {
var maxValue = $(this).attr("value");
if (parseInt(maxValue) < parseInt(minValue)) {
$(this).addClass('disabled');
} else {
$(this).removeClass('disabled');
}
});
}
}
function setuinvestRangeDropDownList(min_values, max_values, min_input, max_input, clearLink, dropDownControl) {
min_values.click(function() {
var minValue = $(this).attr('value');
min_input.val(minValue);
var minInput = nFormatter(minValue, 1);
min_values.val(minValue);
document.getElementById('price_range1').innerHTML = '$' + minInput + ' to ';
disableDropDownRangeOptions(max_values, minValue);
validateDropDownInputs();
});
max_values.click(function() {
var maxValue = $(this).attr('value');
max_input.val(maxValue);
var maxInput = nFormatter(maxValue, 1);
if (maxInput == 0){
var maxInput = 'No Max';          }
document.getElementById('price_range2').innerHTML = '$' + maxInput;
toggleDropDown();
});
clearLink.click(function() {
min_input.val('');
max_input.val('');
document.getElementById('price_range1').innerHTML = "Price Range";
document.getElementById('price_range2').innerHTML = "";
disableDropDownRangeOptions(max_values);
validateDropDownInputs();
});
min_input.on('input',
function() {
var minValue = min_input.val();
disableDropDownRangeOptions(max_values, minValue);
validateDropDownInputs();
});
max_input.on('input', validateDropDownInputs);
max_input.blur('input',
function() {
toggleDropDown();
});
function validateDropDownInputs() {
var minValue = parseInt(min_input.val());
var maxValue = parseInt(max_input.val());
if (maxValue > 0 && minValue > 0 && maxValue < minValue) {
min_input.addClass('inputError');
max_input.addClass('inputError');
return false;
} else {
min_input.removeClass('inputError');
max_input.removeClass('inputError');
return true;
}
}
function toggleDropDown() {
if (validateDropDownInputs() &&
parseInt(min_input.val()) > 0 &&
parseInt(max_input.val()) > 0) {
// auto close if two values are valid
dropDownControl.dropdown('toggle');
}
}
}
setuinvestRangeDropDownList(
$('.investRange .min_value'),
$('.investRange .max_value'),
$('.investRange .freeformPrice .min_input'),
$('.investRange .freeformPrice .max_input'),
$('.investRange .btnClear'),
$('.investRange .dropdown-toggle'));

.dropdown-menu {
left:auto;
margin:auto;
}
.max_value{
padding: 6px 6px 6px 30px;
}
.price_Ranges {
float: right;
width: 50%;
}
.price_Ranges a {
display: block;
text-align: left;
padding: 6px 0 6px 0;
color: #6f6e6e;
font-weight: 500;
}
.price_Ranges a.max_value {
padding-right: 12px;
padding-left: 12px;
margin-left: 30px;
}
.price_Ranges a.min_value {
padding-right: 22px;
padding-left: 12px;
}
.price_Ranges a.disabled {
pointer-events: none;
cursor: default;
color: #E5E4E2;
}
.price_Ranges a:hover {
background: #0074e4;
color: #fff;
cursor: pointer;
text-decoration: none;
}
.btnClear {
clear: both;
border-top: 1px solid #dadada;
padding: 5px 0 0 0;
text-align: center;
}
input.inputError,
input.inputError:focus {
border-color: #e2231a;
background-color: white;
color: #e2231a;
box-shadow: inset 0 0 5px #F7BDBB;
border-radius: 0;
}
.navbar-default {
background-color: #69899f;
border-color: #425766;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<ul class="navbar-nav mr-auto" style="padding:50px;">
<li class="nav-item">
<button id="min-max-price-range" type="button" class="selectpicker select-btn  dropdown-toggle searchParams dropdown-toggle btn btn-default navbar_btn" data-toggle="dropdown" title="price range" aria-expanded="false"> <span id="price_range1" id="navbar_title"></span><span id="price_range2" id="navbar_title">Price Range</span>  <b class="caret"></b></button>
<div class="span2 investRange">
<div class="dropdown-menu ddRange" role="menu" style="width: 295px;padding: 10px; top:auto;">
<div class="rangemenu">
<div class="row freeformPrice">
<div class="col-sm">
<input name="min_price" type="text" class="min_input form-control" placeholder="Min Price" onchange="javascript:void(0)">
</div>
<div class="col-sm">
<input name="max_price" type="text" class="max_input form-control" placeholder="Max Price" onchange="javascript:void(0)">
</div>
</div>

<div class="price_Ranges rangesMax col-md-6" style="padding:0px;">
<a class="max_value" value="" href="javascript:void(0)">No Max</a>
<a class="max_value" value="100000" href="javascript:void(0)">$100k</a>
<a class="max_value" value="300000" href="javascript:void(0)">$3000k</a>
<a class="max_value" value="500000" href="javascript:void(0)">$500k</a>
<a class="max_value" value="1000000" href="javascript:void(0)">$1M</a>
</div>
<div class="col-md-2"> </div>
<div class="price_Ranges rangesMin col-md-6"  style="padding:0px;">
<a class="min_value" value="" href="javascript:void(0)">No Min</a>
<a class="min_value" value="50000" href="javascript:void(0)">$50k</a>
<a class="min_value" value="100000" href="javascript:void(0)">$100k</a>
<a class="min_value" value="250000" href="javascript:void(0)">$250k</a>
<a class="min_value" value="500000" href="javascript:void(0)">$500k</a>
</div>
</div>
<div class="btnClear">
<a href="javascript:void(0)" class="btn btn-link">Clear</a>
</div>
</div>  </div>
</li>
</ul>

Answer 1

因此，您可以在每个input上使用onblur属性来设置blur事件的处理程序

<div class="col-sm">
<input name="min_price" type="text" class="min_input form-control" placeholder="Min Price" onchange="javascript:void(0)" onblur="document.getElementById('price_range1').innerHTML = '$' + this.value + ' to ';">
</div>
<div class="col-sm">
<input name="max_price" type="text" class="max_input form-control" placeholder="Max Price" onchange="javascript:void(0)"  onblur="document.getElementById('price_range2').innerHTML = '$' + this.value;">
</div>

https://jsfiddle.net/vuoedtq2/