当 space 包含仅显示第一部分的数据列表时

Question

我有一个带有组合的文本框，如下所示。我正在使用 datalist 来实现这一点：

$(function(){
  Customercategory();
})



 function Customercategory() { 
    $("#ddlCustomercategoryIdList").empty();
        
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value=General id=1></option>');
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value=My Category id=1></option>');
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value=New Category id=1></option>');
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value=Last Category id=1></option>');
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="Customercategory" list="ddlCustomercategoryIdList" id="ddlCustomercategoryId" class="form-control" placeholder="--Select Category--"/>
 
<datalist id="ddlCustomercategoryIdList">
</datalist>

如您所见，当值中给出 space 时，下拉列表中仅显示第一部分。

只显示 new 而不是 new category

我该如何纠正？

我正在为此使用动态追加函数。

   // Populating Customercategory Dropdwonlist
    $.ajax({
        type: "POST",
        url: "CustomerMaster.aspx/Getcustomercategory",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            Customercategory(data.d);
        },
        error: function (msg) { }
    });

    function Customercategory(data) {
        $("#ddlCustomercategoryIdList").empty();
        for (var i in data) {
            $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value=' + data[i].customercategory + ' id=' + data[i].companyid + '></option>');
        }

    }

Answer 1

您在 value 属性中缺少双引号。由于您的 append() 函数使用单引号将整个 HTML 括起来，您需要对属性使用双引号。您还缺少 id 的双引号。此外，您的 id 值相同，这是一种不好的做法。

$(function(){
  Customercategory();
})

 function Customercategory() { 
    $("#ddlCustomercategoryIdList").empty();
        
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value="General" id="1"></option>');
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value="My Category" id="1"></option>');
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value="New Category" id="1"></option>');
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value="Last Category" id="1"></option>');
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="Customercategory" list="ddlCustomercategoryIdList" id="ddlCustomercategoryId" class="form-control" placeholder="--Select Category--"/>
 
<datalist id="ddlCustomercategoryIdList">
</datalist>

Answer 2

您应该在值外使用引号 ("")，当您的值包含空格时必须使用引号。

喜欢：

value="New Category"

$(function(){
  Customercategory();
})



 function Customercategory() { 
    $("#ddlCustomercategoryIdList").empty();
        
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value="General" id=1></option>');
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value="My Category" id=1></option>');
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value="New Category" id=1></option>');
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value="Last Category" id=1></option>');
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="Customercategory" list="ddlCustomercategoryIdList" id="ddlCustomercategoryId" class="form-control" placeholder="--Select Category--"/>
 
<datalist id="ddlCustomercategoryIdList">
</datalist>

当 space 包含仅显示第一部分的数据列表时

when space included datalist only showing first part

jquery

datalist