代码之家 › 专栏 › 技术社区 › Geoff_S

单击时将javascript对象/数组值转换为表单输入

dom-events ajax json html javascript

Geoff_S · 技术社区 · 6 年前

我已经评论了我的问题从哪里开始,但这是整个脚本的参考。同样,列表填充正确(虽然有点慢),单击确实填充了表单输入,但是值与单击的选项不对应,只是数组中的最后一个。

我做错什么了?

<script type="text/javascript">

//If user types, send their input in ajax POST on each keystroke
$('#productInput').on('input', function(){
    if($(this).val() === ''){
       return;
    }else{

        //their input is searchResult
       const searchResult = $(this).val(); 

       $.ajax({ //url
                data: {
                    search_result:searchResult
                },
                type: "POST", 
                success: function(response){

                    //empty out old responses
                    $('#returnedProducts').empty();

                    //this starts my index
                    let searchResult = response.hits.hits;
                    for(let i = 0; i < searchResult.length; i++) {

                        //this puts matches into the datalist option, which works
                        $("#returnedProducts").append("<option value=" + searchResult[i]._source.category + ">" + searchResult[i]._source.category + "</option>");

                        /*This block is my issue*/
                        $("#productInput").on('input', function(){
                            var val = this.val = this.value;
                            if($('#returnedProducts option').filter(function(){
                                return this.value === val;
                            }).length){
                                //These elements do fill, but the values correspond to only the last array item, not the clicked one 
                                document.getElementById("grpName").value = searchResult[i]._source.frm.grp.grp_name;
                                document.getElementById("grpNum").value = searchResult[i]._source.frm.grp.grp_code;              

                            }
                        }) 
                        /*end of problem block*/ 
                    }
                }
            });
    }

});
</script>

1 回复 | 直到 6 年前

ADyson 6 年前

您正在将选项添加到“returnedProducts”选择列表中,当用户选择一个选项时,您希望一些数据进入表单,对吗?如果是这样的话,处理select列表的“change”事件就更有意义了(在“success”函数之外再处理一次!!),并为额外值的选项设置数据属性。当更改事件运行时,从当前选定的选项中检索数据属性,并使用这些属性填充表单。

大致思路如下:

for(let i = 0; i < searchResult.length; i++) {
    //this puts matches into the select list option
    $("#returnedProducts").append("<option value='" + searchResult[i]._source.category + "' data-grpName='" + searchResult[i]._source.frm.grp.grp_name + "' data-grpNum='" + searchResult[i]._source.frm.grp.grp_code + "'>" + searchResult[i]._source.category + "</option>");
}

然后分开(在你的房间外面) $('#productInput').on('input', function(){

$("#returnedProducts").change(function() {
  var selectedOption = $(this).find("option:selected");
  $("#grpName").val(selectedOption.data("grpName"));
  $("#grpNum").val(selectedOption.data("grpNum"));
});