Javascript 根据文本输入值加载图像

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

谁能告诉我哪里弄错了，我试着使用自动完成，但实际上我不得不按下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>

---

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

---

创建并与我们共享。这是我第一次尝试使用autocomplete，我以前从未使用过fiddle，因此我可能复制了错误的版本，这是我在上面发布的版本，首先您需要jquery UI组件（查看外部文件）。所以我在提琴上加了一句：谢谢，伙计，它成功了，我把它改编成本地图片，效果非常好，

$(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();
    })

});

    $(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();
    })
  });