Styling autocomplete result

I have a jquery which retrieves information from a database. This is working fine.

success: function (data) {
                                  
response($.map(data.d, function (item) {
return {
            label: item.split('|')[0] + ' (' + item.split('|')[1] + ')',
             val: item.split('|')[2]
          }
 }))
 },

I know how to style the box thru ul.ui-autocomplete but what I need is going a little deeper. See picture below: this is the information I am getting, left side of the print screen. What I need to achieve is what is shown on the right, that can be seen here this website, meaning the highlighted part should be aligned on the right. I tried (you never know!) + ’ (’ + item.split(‘|’)[1] + ‘)’ but the word is showing up

The link doesn’t go to your site does it, in that case the screenshot is enough to show what you want. :slight_smile:

Can you instead point to your site, or post the code for the relevant parts?

Without code you could only get a very general advice, if any.

My site is at development stage and only working locally but my code is based upon this sample https://www.aspsnippets.com/Articles/Implement-jQuery-AutoComplete-TextBox-from-database-using-AJAX-PageMethods-in-ASPNet.aspx

The other site is https://www.toctoc.com/ to make it working enter say “laut” in the space “Ingresa un barrio, comuna o ciudad”

Could you also post the code you have so far?

like relevant HTML and CSS snippets. :slight_smile:

My suggestion is: Use the Inspect tool in you browser to find out what CSS is applied on that modal.

Please read the Forum Posting Basics to get ideas on how to present a problem.

I have use the inspect in my browser and got the CSS used in that website and I saw how they did it, this shouldn’t be a problem. The issue is how to insert that CSS in my script.

I tried changing

label: item.split('-')[0],

to

label: item.split('|')[0] + ' <span class="derecho"> (' + item.split('|')[1] + ')<span>'

but the result was this

2020-09-29_15-14-42

The complete script is this one (the original is here)

     <script type="text/javascript">
                $(function () {
                    $("#<%=txtUbicacion.ClientID %>").autocomplete({

                        source: function (request, response) {
                            $.ajax({
                                url: '<%=ResolveUrl("GetData.aspx/GetUbicacion") %>',
                                data: "{ 'psSearch': '" + request.term + "'}",
                                dataType: "json",
                                type: "POST",
                                contentType: "application/json; charset=utf-8",
                                success: function (data) {
                                  
                                    response($.map(data.d, function (item) {
                                        return {
                                            label: item.split('|')[0] + ' <span class="derecho"> (' + item.split('|')[1] + ')<span>',
                                            val: item.split('|')[2]
                                        }
                                    }))
                                },
                                error: function (response) {
                                    alert(response.responseText);
                                },
                                failure: function (response) {
                                    alert(response.responseText);
                                }
                            });
                        },
                        select: function (e, i)
                        {
                            $("#<%=hUbicacion.ClientID %>").val(i.item.val);
                        },
                minLength: 3
            }).focus(function () {
                $(this).autocomplete("search");
                        });
             
        });
     </script>

Not necessarily the way to do it.

You could also take the generated HTML and style it when it occurs with suitable selectors in your style sheet.

If you want to try that, please post the modal html code instead of the script that generates it.

Or would you rather have the thread moved to the Javascript department?

Moved the thread to the Javascript department.

Thank you for moving this thread to the JavaScript forum.

I strongly recommend not using JS to add CSS styles to HTML elements. That is the worst possible way to achieve things.

1 Like

Then adding a css rule in the style sheet to target the html when it occur is a viable option, do you think?

But I come to believe OP has an obligation to keep the styling in the script. But then e.g.flexbox isn’t working in attribute styles.

You may move this thread to the HTML&CSS forum now, if you decide that’s the better approach. :slight_smile:

1 Like

The referenced website at https://www.toctoc.com/ uses the following HTML code for each item:

<div class="auto-item">
    <span><i class="ic-location"></i> Calle Larga, Valparaíso</span>
    <small class="ml-3">Comuna</small>
</div>

With CSS being used to style them, for example:

.auto-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.auto-item, .no-items {
    background-color: #FFF;
    padding: .3rem .6rem .3rem .3rem;
    text-align: left;
}
.auto-item small {
    font-size: 11px;
    color: #AAA;
}
.ml-3, .mx-3 {
    margin-left: 1rem !important;
}

JavaScript is the completely wrong solution to achieve the desired presentation.

I’m throwing this back to the HTML+CSS forum. :baseball: Catch! :grin:

2 Likes

Well not sure if that was so wrong after all :smiley: I got it working thanks to dharmendr at aspsnippets.com I still need to brush up the CSS a little but it looks like what I need.

2020-09-30_18-14-33

    <style type="text/css">
    .labelText {
       float: left;
      font-size: 10pt;
      margin-left:10px;
    }
 
    .valueText {
        font-weight:bold;
        float: right;
        font-size: 10pt;
        margin-right:10px;
    }
 
    .dvDetails {
        padding: 5px;
        width: 235px;
        height: 30px;
        
    }
</style>

And the script:

 <script type="text/javascript">
                $(function () {
                    $("#<%=txtUbicacion.ClientID %>").autocomplete({

                        source: function (request, response) {
                            $.ajax({
                                url: '<%=ResolveUrl("GetData.aspx/GetUbicacion") %>',
                                data: "{ 'psSearch': '" + request.term + "'}",
                                dataType: "json",
                                type: "POST",
                                contentType: "application/json; charset=utf-8",
                                success: function (data) {
                                  
                                    response($.map(data.d, function (item) {
                                        return {
                                            label: item.split('|')[0] ,
                                            val: item.split('|')[1]
                                        }
                                    }))
                                },
                                error: function (response) {
                                    alert(response.responseText);
                                },
                                failure: function (response) {
                                    alert(response.responseText);
                                }
                            });
                        },
                        select: function (e, i)
                        {
                            $("#<%=hUbicacion.ClientID %>").val(i.item.val);
                        },
                minLength: 3
                    }).data("ui-autocomplete")._renderItem = function (ul, item) {
                        
                        var div = $("<li>")
                            .append("<a class='dvDetails'><span class='labelText'>" + item.label.split('_')[0] +
                            "</span><span class='valueText'>(" + item.label.split('_')[1] + ")</span></a>")
                            .appendTo(ul);
                        return div;
                    };;
                });
     </script>
1 Like

Glad you made it. Thanks for the feedback! :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.