Unable to select the options with space appended at the end

[venky424]

I have an combobox as mentioned below. Here when I am selecting "Client1" , I am getting the corresponding values. When I choose "Client2" , I am able to fetch the correct values. But when I choose "Client2 ", I am getting the values of "Client2" instead of "Client2 ". Option id's 818 and 87 have the same name but 818 is having blank spaces appended at teh end. I would like know if it is not possible to choose the names with blank spaces at the end or not in bootstrap-combobox ? Please help me on this case. `

CLIENT

  <option id="88">Client1</option>
  <option id="818">Client2</option>
  <option id="87">Client2    </option>
  </select>

`

[tiesont]

You'd have to implement a custom matcher function. The default simply checks for a substring, as noted in the options. This is untested, but will probably work:

$('your selector here').combobox({ matcher: customMatcher });

function customMatcher(item) {
      return (item.toLowerCase() === this.query.toLowerCase());
} 

[venky424]

I have included this $('clients').combobox({ matcher: customMatcher }); and it is not getting trigerred. please advise what am I missing here.

[venky424]

function popabv(){

    var hvp=encodeURIComponent(document.getElementById("company").options[document.getElementById("company").selectedIndex].id);
    var cli=encodeURIComponent(document.getElementById("clients").options[document.getElementById("clients").selectedIndex].id);
    var abv=encodeURIComponent(document.getElementById("abv").options[document.getElementById("abv").selectedIndex].id);
    var szk=encodeURIComponent(document.getElementById("szk").options[document.getElementById("szk").selectedIndex].id);

    $.ajax({
        type:"GET",
        url:"/DTSDBoff2/searchabv?hvp="+hvp+"&cli="+cli+"&abv="+abv+"&szk="+szk,
        dataType : "json",
        accept:"json",
        cache:false,
        mimeType:'application/json',
        beforeSend: function(xhr) {  

            xhr.setRequestHeader("Accept", "application/json");  
            xhr.setRequestHeader("Content-Type", "application/json");  
        }, 
        success:function(data){
            refsubabv(data);                     
        },
        error:function(e){               
        }
    });
}

When I choose the options as I mentioned in my initial question this function will get trigerred but here I am not able to get accurate value from clients select tag.

[tiesont]

Seems worth noting that the option elements in a select are supposed to have a value attribute, assuming that is the "thing" you want to select when the value of the select changes. You're also using plain old JavaScript when jQuery is quite a bit simpler in this case:

function popabv(){

    var hvp = encodeURIComponent($('#company option:selected').attr('id'));
    var cli = encodeURIComponent($('#clients option:selected').attr('id'));
    var abv = encodeURIComponent($('#abv option:selected').attr('id'));
    var szk = encodeURIComponent($('#szk option:selected').attr('id'));

    $.ajax({
        type:"GET",
        url:"/DTSDBoff2/searchabv?hvp="+hvp+"&cli="+cli+"&abv="+abv+"&szk="+szk,
        dataType : "json",
        accept:"json",
        cache:false,
        mimeType:'application/json',
        beforeSend: function(xhr) {  

            xhr.setRequestHeader("Accept", "application/json");  
            xhr.setRequestHeader("Content-Type", "application/json");  
        }, 
        success:function(data){
            refsubabv(data);                     
        },
        error:function(e){               
        }
    });
}

It gets even simpler if you use the option "correctly":

<select class="form-control" id="clients" style="display: none;" onchange="popabv()">
    <option value="">CLIENT</option>
    <option value="88">Client1</option>
    <option value="818">Client2</option>
    <option value="87">Client2 </option> 
</select>

function popabv(){

    var hvp = encodeURIComponent($('#company').val());
    var cli = encodeURIComponent($('#clients').val());
    var abv = encodeURIComponent($('#abv').val());
    var szk = encodeURIComponent($('#szk').val());

    $.ajax({
        type:"GET",
        url:"/DTSDBoff2/searchabv?hvp="+hvp+"&cli="+cli+"&abv="+abv+"&szk="+szk,
        dataType : "json",
        accept:"json",
        cache:false,
        mimeType:'application/json',
        beforeSend: function(xhr) {  

            xhr.setRequestHeader("Accept", "application/json");  
            xhr.setRequestHeader("Content-Type", "application/json");  
        }, 
        success:function(data){
            refsubabv(data);                     
        },
        error:function(e){               
        }
    });
}

[venky424]

I have tried either of the ways but still Client2 with value 818 is being selected but not value 87. Below is my Select combobox.

`

Client

    <div class="col-md-4">
    <select name="clients" class="form-control" id="clients" onchange="popabv()">
    <option id ="" value="" >Client</option>
    <c:forEach  var="cl" items="${clientcon}">
    <option id="${cl.getclientid()}" value="${cl.getclientid()}" >${cl.getclient()}</option>
  </c:forEach>
     </select>
     </div>
     </div>`

[venky424]

Also when I am using the below one , then String between option tags are being selected instead of id's.

var hvp = encodeURIComponent($('#company').val());
var cli = encodeURIComponent($('#clients').val());
var abv = encodeURIComponent($('#abv').val());
var szk = encodeURIComponent($('#szk').val());

[tiesont]

This doesn't reproduce what you're describing: https://jsfiddle.net/xpvt214o/808748/

It selected the correct item with and without a space at the end.

If you're getting the text rather than the value, that would seem to indicate that the value attribute was not set properly on the option elements, since that's the fallback behavior when no value is set.

[venky424]

Apologize . it is my fault. I have missed setting value in the options tag upon refreshing the Client values . I have updated it and it is working now. Thank you so much for your help.