Question

我正在使用autosuggest插件让用户将他们的朋友添加到聊天中。

现在我想要的是具有有限宽度和高度的单线输入。

drew的插件基本上将div添加到原始输入的位置，并在末尾添加一个输入字段。当输入大量用户名时，这会导致溢出的div。

我已经想出了将这个autosuggest输入包装在另一个div中的想法，以便我控制溢出。

现在，我想做的是，将此div扩展到右侧，以便用户可以输入他喜欢的任意数量的名称并仅隐藏水平溢出（因此仍然能够看到结果）

任何想法？

加载autosuggest的包装器和我的函数：

<div style='border: solid 1px #bcc6d9;width:209px;white-space: nowrap;background-color:#ffffff;'>
        ".load_autosuggest_input("chat_add_friends_to_chat_input","friends","height:20px;display:inline-block;background-color:#ffffff;")."
</div>

相应的功能：

function load_autosuggest_input($target_id, $option, $style,$target_classes = "none", $start_text = "Enter Name Here", $where_to = "none"){

if($target_id == "topmenu_searchbar")
{
    $where = "_top_searchbar";
}
else
{
   $where = ""; 
}


$resource_url = "json_getallusers.php?what=".$option."&";

$html = "
<div style='".$style."'>
<input name='".$target_id."' id='".$target_id."' ";

    if($target_classes!="none"){ $html .= "class='".$target_classes."' "; }

$html .= "type='text' height=2 style='padding:0;margin:0;'>

</div>  
<script>
activate_autosuggest".$where."('".$target_id."','".$resource_url."', '".$start_text."');
</script>
";

return $html;
}

相应的js函数：

function activate_autosuggest(target_id,resource_url, as_startText){


$(document).find('#' + target_id).autoSuggest(
                          resource_url,
                          {selectedValuesProp: 'value',
                          selectedItemProp: 'name',
                          searchObjProps: 'name',
                          minChars: 2,
                          matchCase: false,
                          asHtmlID: target_id,
                          resultsHighlight: false,
                          startText: as_startText,
                          selectFirstDataItem: true,
                          formatList: function(data, elem){
                        var my_image = data.image;

                        var newhtmlfor_autosuggest = "<div style='height:30px;'><div style='float:left;background:url("+my_image+"); background-size:30px 30px;width:30px; height:30px;margin-right:5px;'></div><div style='float:left;height:30px;'><div style='height:15px;line-height:15px;'>"+data.name+"</div><div style='height:15px;line-height:15px;color:#aaaaaa;'>"+data.bottomline+"</div></div></div>";

                        var new_elem = elem.html(newhtmlfor_autosuggest);
                        return new_elem;
                        }


                          }); 
}

隐藏水平溢出与画威尔逊的autosuggest

0 个答案: