Ajax output w/css styles

Question

I am trying to understand some code given to me, it uses an autocomplete script to pull data from a SQL database, and output it when called from a form(user enters a few letters). I want to modify the css that relates to the script, but cannot seem to find where its located? Here is the script :

//autocomplete script
$(document).on('focus','.autocomplete_txt',function(){
    type = $(this).data('type');

    if(type =='productCode' )autoTypeNo=0;
    if(type =='productName' )autoTypeNo=1;  

    $(this).autocomplete({
        source: function( request, response ) {  
             var array = $.map(prices, function (item) {
                 var code = item.split("|");
                 return {
                     label: code[autoTypeNo],
                     value: code[autoTypeNo],
                     data : item
                 }
             });
             //call the filter here
             response($.ui.autocomplete.filter(array, request.term));
        },
        autoFocus: true,            
        minLength: 2,
        select: function( event, ui ) {
            var names = ui.item.data.split("|");                        
            id_arr = $(this).attr('id');
            id = id_arr.split("_");
            element_id = id[id.length-1];
            $('#itemNo_'+element_id).val(names[0]);
            $('#itemName_'+element_id).val(names[1]);
            $('#quantity_'+element_id).val(1);
            $('#price_'+element_id).val(names[2]);
            $('#total_'+element_id).val( 1*names[2] );
            calculateTotal();
        }               
    });
});

Sample of code using script :

<tr id="tr_<?php echo $key+1?>">
    <td> <input class="case" type="checkbox"/> </td>
    <td class="prod_c">
        <input value="<?php echo isset($item['product_id']) ? $item['product_id']: ''; ?>" type="text" data-type="productCode" name="data[InvoiceDetail][<?php echo $key;?>][product_id]" id="itemNo_<?php echo $key+1?>" class="form-control autocomplete_txt" autocomplete="off">
        <span class="add_icon hide" id="add_icon_<?php echo $key+1?>"><i class="fa fa-plus-circle"></i></span>
    </td>

I tried to find via the web developer inspector in firefox, but it will not let me highlight the generated data. Any help will be greatly appreciated!

It looks like they may have been using bootstrap (based on the form-control class on the form element, it's a shot in the dark). There is probably some custom stylesheet somewhere. — mason81
– mason81, Commented Dec 9, 2015 at 20:01
It is bootstrap, but what is the control for the interior of a form text box when autocomplete script runs? — Steven
– Steven, Commented Dec 9, 2015 at 20:30
Well, judging by the JavaScript code I'd say they are using jQuery UI autocomplete for Bootstrap. You should search for that if you want to manipulate the style. Here is an example of what I found via google search: gist.github.com/daz/2168334 — mason81
– mason81, Commented Dec 9, 2015 at 20:33
mason, your link solved my question, if you post I will select as answer and explain why — Steven
– Steven, Commented Dec 9, 2015 at 23:11

mason81 · Accepted Answer · 2015-12-10 01:54:23Z

1

It looks like they are using Bootstrap and jQuery UI Autocomplete. Here is an example of a modified styled for that:

.ui-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  display: none;
  min-width: 160px;
  _width: 160px;
  padding: 4px 0;
  margin: 2px 0 0 0;
  list-style: none;
  background-color: #ffffff;
  border-color: #ccc;
  border-color: rgba(0, 0, 0, 0.2);
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;

  .ui-menu-item > a.ui-corner-all {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap;

    &.ui-state-hover, &.ui-state-active {
      color: #ffffff;
      text-decoration: none;
      background-color: #0088cc;
      border-radius: 0px;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      background-image: none;
    }
  }
}

Source: https://gist.github.com/daz/2168334

answered Dec 10, 2015 at 1:54

mason81

1,7502 gold badges18 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steven Over a year ago

I ended up being able to find the code by right-clicking the element within firefox, and selecting "Inspect Element". I was able to narrow down the css file(there are quite a few) due to your posting.

alex bennett · Accepted Answer · 2015-12-09 22:45:45Z

0

you could use jquery $(this).css to set some styling or you could use chrome developer tools to pinpoint the element you are targeting.

This snippet will change the color of the text to red on a focus event

$(document).on('focus','.autocomplete_txt',function(){
  $(this).css("color", "red" )
}

https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/basics?hl=en

http://api.jquery.com/css/

answered Dec 9, 2015 at 22:45

alex bennett

9021 gold badge12 silver badges18 bronze badges

Collectives™ on Stack Overflow

Ajax output w/css styles

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related