Question

我正在尝试理解给我的一些代码，它使用自动完成脚本从SQL数据库中提取数据，并在从表单调用时输出它（用户输入几个字母）。我想修改与脚本相关的css，但似乎无法找到它所在的位置？这是脚本：

//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();
        }               
    });
});

使用脚本的代码示例：

<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>

我试图通过firefox中的web开发人员检查器找到，但它不会让我突出显示生成的数据。任何帮助将不胜感激！

Answer 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

Answer 2

你可以使用jquery $（this）.css来设置一些样式，或者你可以使用chrome开发人员工具来确定你所针对的元素。

此代码段会将焦点事件中文本的颜色更改为红色

$(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/

Ajax输出w / css样式

2 个答案: