javascript - 如何考虑当旁边的用户名太长时自动加宽搜索字段的脚本

Question

目标很简单，当帐户下拉菜单中的用户名太长时，如何缩小搜索字段的宽度，为较长的名称腾出空间；名称较短时也是如此，如何让表单字段在名称较短时填满空白。

我在这里开始画笔:http://codepen.io/MARS/pen/qtJsr

我会一整天都在研究它，所以现在没有 JS，但实际上我正在寻找想法，而不是有人告诉我到底如何做。

在伪代码中，我猜它会是这样的:

 var username = $('#usernameID").length();
 var search   = $('#searchFieldId');

 if(username > 34) {
   make search bar this width (can be fixed because we have a cap of 34 characters so it will never get bigger than that)
} 

if(username < 34){
  make search field as wide as need be to be next to the elements without there being significant space
}

以下是一些屏幕截图:

我几乎在想 while 语句可能是最好的，但我对 javascript 很陌生，当我把这些点放在一起时，我的思维很慢。

表单字段右侧和用户名左侧有图标占位符，这并不是问题的一部分，而是我需要考虑的问题。

有人可以提供任何建议吗？谢谢。

有效的解决方案代码:

var userWidth = $('#userOptions');
var searchField = $('#txtFamilySearch');
var icons = $('.icons');

$('#txtFamilySearch').css("width", 740 - (userWidth.width() + icons.width()));

Answer 1

您提到您更多的是在寻找想法而不是答案。如果我正在编写此页面，我将首先在搜索栏和用户名字段上设置特定宽度。这样，两个字段组合起来就达到了特​​定的宽度:700px 搜索，200px 用户名 = 900px 工作空间。然后在 body 标记上创建 onload 调用以运行检查用户名宽度的函数。因此用户名将位于 id 为“username”的范围内

function onloadFunct() {
    var userLength = document.getElementById("username").innerHTML.length();
    if (userLength > x) {
        // we want the search to shrink
        var Y = userLength - standardLength;
        // I get the number of characters past what the textbox can normally hold
        var Z = Y * pixelsPerCharacter;
        // I multiply the excess characters by the estimated space they will take up
        document.getElementById("search").width = document.getElementById("search").width - Z;
        document.getElementById("username").width = document.getElementById("username").width + Z;
    } else {
        // we want the search to grow
        // same as above but I reverse the - and + signs 
    }
} 

我希望这会有所帮助，保持搜索栏和用户名字段等于特定宽度的目的是避免占用图标占位符所需的空间。

变量示例:
standardLength = 40; // 40 characters can fit comfortably within the 200 space
pixelsPerCharacter = 5; // each character will take up about 5 pixels, so for every character past the bounds we will add 5

或者:您可以取消用户名字段的宽度，并在页面加载后使用

javascript: document.getElementById("search").width = 900 - document.getElementById("username").width;