Php 动态选择框在Jquery onchange之后未正确填充提前输入文本

我正在我的项目中使用，我想修改我的脚本以正确填充输入文本。我发现了类似的问题，但不幸的是，我没有找到正确的方法来解决这个问题：

基于以上描述和参考，我创建了一个html页面，显示我的疑问：

首先，我将展示调用产品的MySql表，其中包含填充到输入文本中的记录：

id | categoryFK (Foreing Key) | ProductName   | image
--------------------------------------------------------
01 | 1 (Shoes)                | Adidas Shoes  | img_01
02 | 1 (Shoes)                | Nike Shoes    | img_02
03 | 1 (Shoes)                | Red Tenis     | img_03
04 | 2 (Clothes)              | Black Jacket  | img_04
05 | 2 (Clothes)              | Blu T-shirt   | img_05

现在，我将显示显示以下内容的html代码：

用php代码类别填充的选择框； 输入文本，该文本填充了TypeAhead插件产品； 以及div图像，当用户选择输入文本产品中的选项时显示值。 动态引导 类别 选择类别 产品名称 选择TypeAhead值后，图像名称将显示在此处 下面是TypeAhead和Ajax脚本，其中Ajax脚本向php脚本发送请求、接收响应并向TypeAhead发送数据以填充输入文本：

id | categoryFK (Foreing Key) | ProductName   | image
--------------------------------------------------------
01 | 1 (Shoes)                | Adidas Shoes  | img_01
02 | 1 (Shoes)                | Nike Shoes    | img_02
03 | 1 (Shoes)                | Red Tenis     | img_03
04 | 2 (Clothes)              | Black Jacket  | img_04
05 | 2 (Clothes)              | Blu T-shirt   | img_05

$document.readyfunction{ var乘积； 变量名称=[]；//数组 var list={}；//对象 $'categoryFK'。关于'change'，函数{ var queryID=$this.val； $.ajax{ url:fetch.php， 方法：邮寄， 数据：{category:queryID}， 数据类型：json， 成功：functiondata{ 控制台日志数据； $.eachdata，functioni，optionHtml{ $'products'.appendoptionHtml； }; $.typeahead.val； $.image.empty； 产品=数据； } }; $'.typeahead'.typeahead{ 来源：functionquery，结果 { $.eachproducts，functionidx，item{ 如果！~names.indexOfitem.productName names.pushitem.productName； 列表[item.productName]=item.image； }; 返回结果名称； }, 余选：函数数据{ var tmp=列表[数据]； $'image'.htmltmp； }, }; }; }; 最后，php脚本fetch.php接收Ajax请求并以JSON格式发送结果：

疑问：当用户选择类别选择框类别时，TypeAhead输入文本产品将填充与所选类别ID相关的记录

第一次出现这种情况时，将正确填充输入文本，但当用户在选择框类别中选择类别值而不刷新页面时，将使用products表中的所有记录填充Typeahead输入文本产品，而不是仅填充与所选类别ID相关的记录

---

在这里，您可以看到上面的所有代码是如何工作的，但我没有找到正确的方法来修改脚本以正确填充TypeAhead输入文本。

经过一些调整后，我设法找到了解决方案。我保留了变量列表，并在Typeahead的afterSelect事件中进行了调整，在输入文本产品中选择一个选项后，afterSelect事件将与所选项目相关的值发送到div图像。可以看出，这种解决方案是有效的

下面，调整了Ajax和TypeAhead脚本，现在也可以正常工作了。调整是在Ajax成功和TypeAhead afterSelect事件中进行的：

        var products;
        var list = {}; // object

        $ ( function ()
        {
            $('#categoryFK').on('change', function(){
                var queryID = $(this).val();

                $.ajax({
                    url:"fetch.php",
                    method:"POST",
                    data: {
                        category: queryID
                    },
                    dataType:"json",
                    success:function(data)
                    {
/* The adjust was made here on Ajax success */

                        console.log(data);
                        
                        $("#products").val ('');
                        
                        products = data;
                        
                    }
                });
            });

            $('#products').typeahead({
                source: function ( query, result )
                {
                    result ( $.map(products, function (item)
                        {
                            return item.productName;
                            
                        }
                    ));
                    
                },
            
                /* The adjust was made here on afterSelect event */
                
                  afterSelect: function(data) {
       $.each(products, function(idx, item){
   
      list[item.productName] = item.image;
   });
  
   
   var img = list[data];
  
   $('#image').html(img);
   
   
  },                        
            });
            
        });

最后，我找到了解决我的疑问的办法。如果有人建议在上面的代码中进行一些优化，那就太好了。谢谢