点击页面后,更改功能显示结果

时间:2018-03-21 20:48:08

标签: javascript jquery select search onchange

我有搜索输入框,用户输入一些字符然后弹出建议列表,当用户从列表中选择项目时,数据会在某些字段中自动填充。我在搜索框中使用了Awesomplete widget

HTML

 <input data-list="Samuel Mendoza, Bowie Tarren" class="awesomplete" style="display:inline-block;width: 371px; font-weight:bold;z-index:0"/>

<button class="fa fa-search" type="button" style="border:none;background-color: #ffffff;    margin-left: -33px; color: #dedede;position:relative; z-index:1"></button>

JS

$(document).ready(function () {
    $(".awesomplete").change(function () {
    var pt_name = $('.awesomplete').val();
if(pt_name == "Samuel Mendoza"){

        document.getElementById("first_name").value = "Samuel";
        document.getElementById("middle_name").value = "Ariel";
        document.getElementById("last_name").value = "Mendoza";
        document.getElementById("nickname").value = "Same";
        $("#gender").val('1');
        document.getElementById("dob").value = "18 Dec 1977";
        document.getElementById("street_1").value = "14 Tall Acres Drive";
        document.getElementById("street_2").value = "";
        document.getElementById("city").value = "Spring";
        $("#state").val('1');

        document.getElementById("postal_code").value = "77387";
        document.getElementById("tel").value = "713-251-2721";
        document.getElementById("email").value = "smendoza@protonmail.com";
        document.getElementById("mrn").value = "2457324";
        document.getElementById("insurance_carrier").value = "Blue Cross Blue Shield";
        $("#ref_service").val('16');
        $("#ref_physician").val('2');

        document.getElementById("date_ex1").value = "20 Jan 2017";
        document.getElementById("date_ex2").value = "20 Jan 2017";
        document.getElementById("date_ex3").value = "20 Jan 2017";

        $("#pt_nutritionist").val('1');
        document.getElementById("primary_diagnosis").value = "ICD-10";
        document.getElementById("secondary_diagnosis").value = "ICD-10";
        $("#problem").val('1');
        $("#etiology").val('1');
        $("#symptom").val('2');
        $("#food_access").val('4');


    }
  });
});

我现在面临的问题是,当我从搜索框弹出窗口中选择项目时,字段不会自动填充。但是,当我选择项目并单击其他位置时,字段将自动填充。是因为Awesomplete小部件还是更改功能?我不明白为什么会这样。

我希望只要我从建议弹出列表中选择项目,那么只有字段应该自动填充。不需要额外的点击。

我该怎么做?有人可以帮我吗?

非常感谢。

编辑:我猜我的问题不是因为平等的标志。我的搜索显示结果= =和= =这也是。问题是需要额外点击才能显示结果。

1 个答案:

答案 0 :(得分:0)

变化:

var pt_name = $('.awesomplete').val();
if(pt_name = "Samuel Mendoza"){

var pt_name = $(this).val();
if(pt_name == "Samuel Mendoza"){

==是比较运算符,而不是单个等号。 https://www.w3schools.com/js/js_comparisons.asp

同样$(this).val();指的是更改的项目,这是有意义的。

然后我建议将document.getElementById("的所有行更改为您在其他行上使用的更简单的jQuery语法。

IE改变:

document.getElementById("first_name").value = "Samuel";

$('#first_name').val() = "Samuel";

即使数据填充效率更高,也更容易阅读。