根据文本输入值加载图像

Load image depending on text input value

本文关键字：加载图像输入文本更新时间：2023-09-26

我是一个初学者程序员，我正在尝试重新创建 icomoon 的搜索功能（输入一个单词，它会显示相关图像），但我无法获取输入字段中键入的值以通过div 触发图像，

谁能告诉我我错在哪里，我尝试使用自动完成，但我必须实际按下 a 下拉菜单来触发图像。这是我的第二稿，但我被困在如何解释值上，

提前致谢

.HTML

<div class="container">
    <div class="text_search">
        <form id='text-form' action='#'>
            <h1><label for="tags">What did he say?</label></h1>
            <input type="text" id="project">
            <p><img class="container-icon" src="img/transparent.png" class="ui-state-default" alt=""></p>
            <input type="hidden" id="project-id">
        </form>
        <div class="blue"><img src="img/blue.png"></div>
        <div class="grey"><img src="img/grey.png"></div>
        <div class="mauve"><img src="img/mauve.png"></div>
        <div class="orange"><img src="img/orange.png"></div>
        <div class="pourpre"><img src="img/pourpre.png"></div>
        <div class="vert"><img src="img/vert.png"></div>
        <div class="yellow"><img src="img/yellow.png"></div>
    </div>
</div>

.JS

$(function() {
    var availableTags = [
        {value: "house", icon: "blue.png"},
        {value: "sunny", icon: "yellow.png"},
        {value: "love", icon: "mauve.png"},
        {value: "dance", icon: "orange.png"},
        {value: "jump", icon: "pourpre.png"},
        {value: "tree", icon: "vert.png"},
        {value: "tree", icon: "grey.png"},
        "color",
        "star",
        "balloon",
        "green",
        "yellow",
        "drawing",
        "princess",
        "horse",
        "rose",
        "super hero",
        "king",
        "pink",
        "blue",
        "bird",
        "flower",
        "clouds"
    ];
    function split( val ) {
        return val.split( / 's*/ );
    }
    function extractLast( term ) {
        return split( term ).pop();
    }
    $('#text-form').on('submit', function(event){
        var keyword = $('#project', this).val();
        $( ".container-icon" ).attr( "src", "img/" + ui.item.icon );
        console.log(keyword)
        event.preventDefault();
    })
});

进行了一些更改并删除了不相关的部分（对于 POC）：

根据搜索词呈现图像

    $(function() {
    var foundImage;
    var availableTags = [
      {value: "house", icon: "dog1.jpg"},
      {value: "sunny", icon: "dog2.jpg"},
      {value: "love", icon: "dog3.jpg"}
    ];
    function split( val ) {
      return val.split( / 's*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }
//get the value of a input field
    $('#text-form').on('submit', function(event){
      var keyword = $('#project', this).val();
      foundImage = false;
        $.grep( availableTags, function( n, i ) {
        if (n.value === keyword) {
            $( ".container-icon" ).attr( "src", "http://animalia-life.com/data_images/dog/" + n.icon );            
            foundImage = true;
        }
    });      
            if (!foundImage) {
                $( ".container-icon" ).attr( "src", "img/transparent.png");
            }        
      event.preventDefault();
    })
  });