Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/443.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 自动完成搜索工作,但未被选中_Javascript_Jquery - Fatal编程技术网

Javascript 自动完成搜索工作,但未被选中

Javascript 自动完成搜索工作,但未被选中,javascript,jquery,Javascript,Jquery,通过jquery动态创建输入文本框。自动完成功能运行良好。但是,当我选择一个项目时,它的值没有正确呈现,我可以知道我在这里遗漏了什么吗 Jquery $(function() { var projects = [ { "label": "ajax", "value": "1003", "desc": "foriegn" }, { "label": "jquery", "value": "

通过jquery动态创建输入文本框。自动完成功能运行良好。但是,当我选择一个项目时,它的值没有正确呈现,我可以知道我在这里遗漏了什么吗

Jquery

$(function() {
  var projects =  [
    {
        "label": "ajax",
        "value": "1003",
        "desc": "foriegn"
    },
    {
        "label": "jquery",
        "value": "1000",
        "desc": "dd"
    },


    {
        "label": "wordpress theme",
        "value": "1000",
        "desc": "h"
    },
    {
        "label": "xml",
        "value": "1000",
        "desc": "j"
    } ]; 

$("#addButton");
var counter = 13;

$("#addButton").click(function() {
    var newTextBoxDiv = $(document.createElement('div'))
            .attr("id", 'TextBoxDiv' + counter);

    var roleInput = $('<input/>', {
        type: 'text',
        placeholder: 'Role',
        name: 'Role' + counter,
        id: 'project-description' + counter
    });

    var searchInput = $('<input/>', {
        type: 'text',
        placeholder: 'search',
        name: 'search' + counter,
        id: 'project' + counter
    });

    var hidd = $('<input/>', {
        type: 'hidden',
        name: 'searchhid' + counter,
        id: 'project-id' + counter
    });


    newTextBoxDiv.append(roleInput).append(searchInput).append(hidd);
    newTextBoxDiv.appendTo("#TextBoxesGroup");
    $("#project" + counter).autocomplete({
        minLength: 0,
        source: projects,
        focus: function(event, ui) {
            $("#project" + counter).val(ui.item.label);
            return false;
        },
        select: function(event, ui) {
            $("#project" + counter).val(ui.item.label);
            $("#project-id" + counter).val(ui.item.value);
            $("#project-description" + counter).val(ui.item.value);
            $("#project-icon" + counter).attr("src", "images/" + ui.item.icon);
            return false;
        }
    })


    counter++;
});





});
` 下面是Html

<div id="project-label"></div>

<input id="project" />
<input type="hidden" id="project-id" />

<input type="text" disabled="disabled" id="project-description"></p>


 <div id='TextBoxesGroup'>
 <div id="TextBoxDiv1" class="form-inline control-group">

 </div>
</div>
 <input type='button' value='Add' id='addButton' />

请告诉我这段代码缺少什么

我认为这是一个JavaScript错误。自动完成中的select事件查找$project icon+计数器,但我看不到该元素在任何地方被渲染。另外,在尝试设置该元素的src属性时,您引用ui.item.icon,但您的值数组不包含该属性。

这并不是停止自动完成。我已经检查了我的设置后删除-图标..哦,我现在也看到了这个问题。创建一行新的文本框后,增加计数器的值。当您点击select事件时,这是一个问题,因为它使用counter的当前值来查找页面上的元素。如果您使用计数器-1查找您的ID,它将起作用,但仅适用于最近添加的行。前面的任何行都不起作用。在select事件中。通过将counter的值附加到HTML元素的ID,可以查找HTML元素。问题是,当您点击该按钮时,counter的值已经增加,因此您要查找的ID实际上不存在。但是,如果您使用计数器-1,它们将。同样,这只适用于最近添加的行。