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
Erik_J
September 29, 2020, 4:18pm
2
The link doesnât go to your site does it, in that case the screenshot is enough to show what you want.
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â
Erik_J
September 29, 2020, 4:55pm
4
Could you also post the code you have so far?
like relevant HTML and CSS snippets.
Erik_J
September 29, 2020, 5:49pm
5
Corobori:
The other site
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
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>
Erik_J
September 29, 2020, 6:37pm
8
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?
Erik_J
September 29, 2020, 8:28pm
9
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
Erik_J
September 29, 2020, 9:53pm
11
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.
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.
2 Likes
Well not sure if that was so wrong after all aspsnippets.com I still need to brush up the CSS a little but it looks like what I need.
<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
Erik_J
September 30, 2020, 11:38pm
15
Glad you made it. Thanks for the feedback!
system
January 1, 2021, 1:11pm
17
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
Catch! 
I got it working thanks to dharmendr at 