具有/ css样式的Ajax输出

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!

Answer 1

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/